reactjs - NextJS 如何在导航栏中调用动态内容

Question

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

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

页数：

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

布局：

• 默认.js

服务：

• menuService.js

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

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

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

标签： reactjsnext.jsnavbarserver-side-rendering

Answer 1

你可以使用自定义的 _document / render 页面 来全局注入 props。有一些警告，但是，对于您的用例来说，它们似乎不是问题。

您还可以使用此答案中描述的 Singleton 方法。