0

我有一个自定义的 _app.js，如下所示：

function MyApp({ Component, pageProps }) {
  const Layout = Component.layoutProps?.Layout || React.Fragment
  const layoutProps = Component.layoutProps?.Layout
    ? { layoutProps: Component.layoutProps }
    : {}
  const meta = Component.layoutProps?.meta || {}
  const description =
    meta.metaDescription || meta.description || 'Meta Description'
  const store = useStore(pageProps.initialReduxState)

  return (
    <QueryClientProvider client={queryClient}>
      <Provider session={pageProps.session}>
        <Title suffix="My Dynamic Site">{meta.metaTitle || meta.title}</Title>
        <Description>{description}</Description>
        <Meta />
        <ReduxProvider store={store}>
          <PersistGate persistor={store.__PERSISTOR} loading={null}>
            <CartBox />
            <Layout {...layoutProps}>
              <Component {...pageProps} />
            </Layout>
          </PersistGate>
        </ReduxProvider>
        <ReactQueryDevtools initialIsOpen={false} />
      </Provider>
    </QueryClientProvider>
  )
}

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

  return { ...appProps }
}

export default MyApp

现在，我想使用 ssg/ssr 数据获取方法来获取数据，以帮助 SEO 团队处理我的页面组件。但是，似乎任何方法都没有按预期工作，它们都没有真正将道具传递给页面组件。这是我的页面组件。

const HomePage = ({ title, stars }) => {
  console.log(title, stars);  // undefined, undefined
  return (
    <div>
      <Header title={title} />
      <GhStars stars={stars} />
      <Footer />
    </div>
  )
}

export const getStaticProps = async () => {
  return {
    props: {
      title: "My Dynamic Title From getStaticProps"
    }
  }
}

// I tried both getInitialProps & getStaticProps independently.
HomePage.getInitialProps = async (ctx) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}

export default HomePage

我可能肯定会错过一些东西，到目前为止我还没有弄清楚。任何帮助将不胜感激。谢谢。

4

0 回答 0