NEXTjs 中客户端组件的内部化

Question

我正在开展一个项目，需要将内容翻译成 4 种不同的语言。我看过很多教程并尝试了几种解决方案，但每次我都会遇到同样的问题。 在我的应用程序中，我有很多需要翻译的“使用客户端”组件，但我用于翻译的字典仅用作仅服务器组件。

dictionary.ts 示例：

import 'server-only'
import type { Locale } from '@/i18n.config'

const dictionaries = {
  en: () => import('@/dictionaries/en.json').then(module => module.default),
  de: () => import('@/dictionaries/de.json').then(module => module.default)
}

export const getDictionary = async (locale: Locale) => dictionaries[locale]()

当我运行我的应用程序时，出现错误： 您正在导入仅需要服务器的组件。这仅适用于服务器组件，但其父组件之一被标记为“使用客户端”，因此它是一个客户端组件。

在我观看的所有教程中，人们都展示了没有任何钩子的简单示例，因此他们没有遇到此类错误。

Answer 1

执行此操作的最佳方法是在视图层次结构顶部附近的基本格式化程序中创建一个提供程序组件。该提供程序在启动时加载并缓存服务器语言词典，并与客户端环境共享。详细解决方案在这里：

https://github.com/vercel/next.js/discussions/57405