Next.js+React进门记017【自定义修改Next.js的_app.js文件】

本文链接：https://blog.csdn.net/kaikyou3000/article/details/140115551

Next.js的_app.js具备许多的功能和作用，网上查找相关信息很少，所以很难全部理解清楚，但大致可以归纳如下：
・可以影响到pages文件夹下所有页面的显示，因此可以设置各页面的共通功能。
・可以获取pages文件夹下所有页面的全局数据（包括用户登录信息、以及其他共通信息等）
・服务器端渲染的设定
・错误处理的设定

计划：将index.js和about页面的计数功能、添加信息功能、背景颜色显示功能的代码分离出来，交给_app.js文件进行管理，使index.js和about页面相互切换时，在无刷新的情况下保持状态同步。

首先，修改index.js页面代码

将以下相关代码分离出来

分离出来的代码，拷贝到_app.js文件里

以上可发现useCounter和useInputArray两个自定义钩子函数管理的状态数据比较冗长，代码输入比较繁琐，因此，可以将这两组状态数据保存到counter和inputArray两个变量中。

保存到counter和inputArray两个变量中并返回

用index.js页面接收_app.js文件传来的状态管理数据

_app.js文件代码更新如下：

import '../styles/globals.css'
import { useCounter } from '../customhooks/useCounter'
import { useInputArray } from '../customhooks/useInputArray'
import { useBgColor } from '../customhooks/useBgColor'

function MyApp({ Component, pageProps }) {
  const counter = useCounter();
  const inputArray = useInputArray();
  useBgColor();
  return <Component {...pageProps} {...counter} {...inputArray} />
}

export default MyApp

index.js页面代码更新如下：

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { Footer } from '../components/Footer'
import { Main } from '../components/Main'
import { Header } from '../components/Header'

export default function Home(props) {
const {
  bar, 
  isShow, 
  handleClick, 
  handleDisplay, text, array, handleChange, handleAdd} = props;
  
  return (
    <div className={styles.container}>
      <Head>
        <title>Index page</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header />
      {isShow ? <h1>{bar}</h1> : null}
      <button  onClick={handleClick}>
      累计按钮
      </button>
      <button onClick={handleDisplay}>
        {isShow ? "不显示" : "显示"}
      </button>
      <button onClick={handleAdd}>追加</button>
      <ul>
        {console.log(array)}
        {array.map(item => {
          return(<li key={item}>{item}</li>);           
        })}
      </ul>
      <input type="text" value={text} onChange={handleChange} />
       <Main page="index"/>
     <Footer />
    </div>
  )
}

和index.js页面一样的方法，修改about.js页面，接收_app.js文件传来的状态管理数据，about.js页面代码更新如下：

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { Footer } from '../components/Footer'
import { Main } from '../components/Main'
import { Header } from '../components/Header'

export default function About(props) {
  const {
    bar, 
    isShow, 
    handleClick, 
    handleDisplay, text, array, handleChange, handleAdd} = props;

  return (
    <div className={styles.container}>
      <Head>
        <title>About page</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
       <Header />
       {isShow ? <h1>{bar}</h1> : null}
      <button  onClick={handleClick}>
      累计按钮
      </button>
      <button onClick={handleDisplay}>
        {isShow ? "不显示" : "显示"}
      </button>
      <button onClick={handleAdd}>追加</button>
      <ul>
        {console.log(array)}
        {array.map(item => {
          return(<li key={item}>{item}</li>);           
        })}
      </ul>
      <input type="text" value={text} onChange={handleChange} />
       <Main page="about"/>

     <Footer />
    </div>
  )
}

刷新index.js页面，测试各个功能没问题后，点击About链接切换到about.js页面，about.js页面和index.js页面保持相同状态时，则测试成功。