Next.js 最新提供了 next-i18next 库，是目前最常用的多语言解决方案之一。它基于 react-i18next，能很好地与 SSR 和 SSG 兼容。

你需要先安装：

npm install next-i18next react-i18next i18next

然后在项目根目录创建 i18n.js 文件，配置默认语言和可用语言列表：

const NextI18Next = require('next-i18next').default;const i18n = new NextI18Next({  defaultLanguage: 'zh',  otherLanguages: ['en'],});module.exports = i18n;

同时，在 next.config.js 中启用 i18n 支持（虽然 next-i18next 已封装部分逻辑，但这一步仍然推荐保留）：

module.exports = {  i18n: {    locales: ['zh', 'en'],    defaultLocale: 'zh',  },};

这样你就完成了基础环境搭建，接下来可以开始使用翻译内容了。

通常我们会把不同页面或模块的翻译内容按语言分类存放。例如：

/public/locales/├── zh│   ├── common.json│   └── dashboard.json└── en    ├── common.json    └── dashboard.json

每个 JSON 文件对应一个模块或页面的文案集合。比如 common.json 放通用词汇，dashboard.json 放仪表盘相关的文案。

在组件中使用方式如下：

import { useTranslation } from 'next-i18next';export const Header = () => {  const { t } = useTranslation('common');  return 
{t('welcome')}
;};

这种方式让代码清晰，也方便后期扩展和协作。

语言切换一般通过下拉菜单或按钮完成。你可以将当前语言状态保存在 React Context 或全局状态管理工具（如 Zustand）中，并结合 Cookie 或 localStorage 持久化。

举个简单例子：

import { useRouter } from 'next/router';export const LanguageSwitcher = () => {  const { asPath, push } = useRouter();  const changeLang = (locale) => {    push(asPath, undefined, { locale });  };  return (     changeLang(e.target.value)}>      中文      English      );};

如果你希望用户切换后记住偏好，可以在切换时写入 Cookie：

document.cookie = `NEXT_LOCALE=${locale}; path=/; max-age=31536000`;

并在页面加载时读取这个 Cookie 设置初始语言。

如果你用的是 Server Components（App Router），需要注意以下几点：

import { serverSideTranslations } from 'next-i18next/serverSideTranslations';export const getStaticProps = async ({ locale }) => ({  props: {    ...(await serverSideTranslations(locale, ['common', 'dashboard'])),  },});