如何使用自定义 App 组件在 next.js 中启用 ssg/ssr

问题描述

我有一个自定义的 _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 团队获取我的页面组件。 但是，似乎任何方法都没有按预期工作，它们实际上都没有将 props 传递给页面组件。 这是我的页面组件。

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

我可能确实遗漏了一些东西，到目前为止我还没有弄清楚。 任何帮助将不胜感激。谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）