如何在Next.js页面中访问_app.js通过getInitialProps传递的pageProps

方案1：页面组件直接读取props（最简单） #

你在_app.js中已经通过<Component {...pageProps} />把所有pageProps透传给了页面对象，所以每个页面组件可以直接从自身的props中拿到global全局数据，以index.js为例：

// pages/index.js
// 函数组件直接从参数解构获取
export default function Home({ global }) {
  // 直接使用全局数据即可
  console.log('加载到的全局数据：', global)
  return <div>站点名称：{global.siteName}</div>
}

如果是类组件，通过this.props.global即可访问。

方案2：通过React Context共享（适合深层组件调用） #

如果全局数据需要在页面下的深层子组件中使用，不想层层传递props，可以用React Context做全局状态共享：

1. 新建全局Context文件，比如context/GlobalContext.js

import { createContext, useContext } from 'react'

const GlobalContext = createContext()
export const GlobalProvider = GlobalContext.Provider
// 封装获取全局数据的自定义hook
export const useGlobal = () => useContext(GlobalContext)

2. 修改_app.js的渲染部分，用Provider包裹内容：

import { GlobalProvider } from '../context/GlobalContext'

// ... 其他原有代码
return (
  <>
    <Head>
      <link rel="shortcut icon" href={getStrapiMedia(global.favicon.url)} />
    </Head>
    <GlobalProvider value={global}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </GlobalProvider>
  </>
)

3. 任意组件（包括页面、嵌套子组件）都可以直接调用hook获取数据：

import { useGlobal } from '../context/GlobalContext'

function AnyComponent() {
  const global = useGlobal()
  return <div>站点备案号：{global.icp}</div>
}

注意事项 #

你当前的getInitialProps写法存在缺陷：直接覆写pageProps会导致页面自身getInitialProps返回的属性丢失，建议修改为合并写法：

MyApp.getInitialProps = async (appContext) => {
  // Calls page's `getInitialProps` and fills `appProps.pageProps`
  const appProps = await App.getInitialProps(appContext)
  const globalLocale = await getGlobalData()

  return {
    ...appProps,
    pageProps: {
      // 先展开页面原有props，再追加全局数据
      ...appProps.pageProps,
      global: globalLocale,
    },
  }
}

内容的提问来源于stack exchange，提问作者YannickAaron