Next.js - 在构建时使用 getStaticProps 生成持久布局

Question

我正在使用这种模式在 Next.js 中构建持久布局：Persistent Layout Patterns in Next.js

当您的布局不依赖外部数据时，它可以正常工作。

如果你想构建一个像页面这样的文档该怎么办 - 在你的布局中有一个侧边栏，其中包含 Getting Started、Examples、FAQ、About 等部分？理想情况下，我想将这些部分存储在降价文件中，并在构建时生成布局。

// markdown file
---
section_1: "Getting Started"
section_2: "Examples"
section_3: "FAQ"
section_4: "About"
---

如何用 Next.JS 和getStaticProps 实现这样的功能？

Answer 1

getStaticProps只能在页面中使用，所以不能生成布局组件。

您可以通过编写自定义 Node.js 脚本来扩展构建过程，该脚本将读取降价并创建带有侧栏部分的 .json 文件。

创建的.json文件可以导入到客户端的Layout组件中。

您需要在 package.json 中扩展 npm 脚本 build，因此 next build 并且您的脚本将使用一个命令运行。