如何解决如何使用自定义 App 组件在 next.js 中启用 ssg/ssr
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 举报,一经查实,本站将立刻删除。