微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决如何使用自定义 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 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?