header - 在 NextJS 中预渲染页眉和页脚组件

Question

我们在 _app.tsx 中有 HEADER 和 FOOTER 组件，我们正在使用 SSR 和 SSG。但是我们想为 HEADER 和 FOOTER 组件预渲染 html，也像页面一样（为了有效的 SEO）。

由于我们不能在 _app.tsx 中使用 getServerSideProps 和 getStaticProps，我们在每个页面中都使用 HEADER 和 FOOTER 组件，并在每个页面中的 getServerSideProps 中调用 HEADER 和 FOOTER 的 API。但这会导致在每个页面中呈现 HEADER 和 FOOTER 组件。那么有没有办法在一个文件中制作 HEADER 和 FOOTER 组件并且仍然可以为它们进行预渲染？

Answer 1

您可以创建一个布局组件并将其添加到您的"_app.ts"文件中，以便在整个应用程序中共享布局。

您可以在 Next Js 文档https://nextjs.org/docs/basic-features/layouts上找到有关此的更多信息