NextJS如何调用navbar中的动态内容

Question

我正在使用 NextJS 和 Strapi 作为 CMS 创建一个网站。我想从 Strapi 编辑导航栏链接。

在我的 NextJS 应用程序中，我创建了一个布局组件来将我的页面包装在 _app.js 文件中。此布局包含页眉、导航栏和页脚。这是文件架构：

页数：

• _app.js
• index.js
• page1.js

布局：

• default.js

服务：

• menuService.js

由于我的布局组件将页面包装在 _app.js 中，我不知道服务器端通过调用 Strapi API 在哪里调用我的导航栏的链接。事实上，我不能在 _app.js 中使用 getServerSideProps() 因为 NextJS 不处理它并且当我们使用组件 Link 重定向用户时 getStaticProps() 呈现客户端。

其实我卡住了，不知道怎么办。这是一个非常简单的功能，但 NextJS 似乎并没有真正处理这种动态内容。

目前我找到的唯一解决方案是在我的所有页面中使用我的 Layout 组件直接包装内容（而不是通过 _app.js）并在相同的页面中使用 getServerSideProps() 返回的道具.但这是一个非常沉重的解决方案。

Answer 1

你可以使用 custom _document / render page 这将在全球范围内注入道具。有一些 caveats，但是，它们对您的用例来说似乎不是问题。

您也可以使用 中描述的 Singleton 方法。