Next.js.在哪里放置全球提供商？

i7uaboj4 于 2023-06-22 发布在其他

关注(0)|答案(3)|浏览(89)

我正在使用Next.js，我需要实现i18 n。它需要我添加一些全局提供程序，以 Package 整个应用程序。此外，它必须接收来自某些状态管理的更新（例如。Redux）在活动语言更改时正确地重新渲染整个应用程序。
在标准的React应用程序中，我们有App.js，我们将它放入index.js中，并将所有逻辑/提供程序保留在这里。
但在Next的情况下，我不确定该把这个逻辑放在哪里。我仔细检查了他们的文件，但我没有发现任何提到它。只有_app.js和_document.js，但实际上两者都不可能连接到Redux等。实际上它们不是为这个设计的。
我只是好奇如果Next提供了一些官方的方式来做到这一点，或者我应该手动创建一些HOC作为应用程序，然后自己 Package 整个应用程序？
顺便说一句，我几乎不明白**_app和_document**之间的区别。所以我也会感激任何澄清！

next.js

来源：https://stackoverflow.com/questions/61518716/next-js-where-to-put-a-global-provider

3条答案

按热度按时间

xurqigkl1#

请仔细阅读文档，然后，你可以在第二个点here上找到 Keeping state when navigating pages。这就是Redux的用途。
我可以从_app.js文件将我的整个应用程序连接到redux和i18n。在我以前的项目中，我的队友甚至使用_document.js文件来连接i18n。
从他们的文档中可以看出，这个_app.js的目的是 * 覆盖和控制页面初始化 *。因此，您可以从redux接收更新，并在渲染页面之前将更改放在IntlProvider上。
其他解决方案就像你所说的，通过创建一些HOC来 Package 你的应用。
选择权在你。

赞(0）回复(0）举报 2023-06-22

lvjbypge2#

要执行此操作的文档在这里：
https://nextjs.org/docs/getting-started/react-essentials#rendering-third-party-context-providers-in-server-components
1.创建一个providers. tsx文件夹，并确保其顶部有use client。
1.在顶层布局中使用提供程序文件。

赞(0）回复(0）举报 2023-06-22

ygya80vv3#

您可以使用next-connect-redux包。
Github page Example repo

赞(0）回复(0）举报 2023-06-22