前言
有关 Next.js 国际化的方案网上很多，而且各部相同，但大部分的方案都是在 /app 目录下添加动态路由 [lang] 这样的形式，这不是我想要的效果。
我希望国际化的实现不能破坏应用程序的目录结构和路由，在经过一段时间摸索后，发现 next-intl
有提供现成的方案：
y0cbqfwghovy5x67t2vq8uzezsic9xt9.png
更多详细文档：next-intl
如果官方文档打不开的伙伴，可以到 Github 上克隆代码，本地运行根目录的
docs文件夹
具体步骤
- 安装依赖
pnpm add next-intl
- 根目录新建
messages文件夹，并写入对应的国际化文件：
// en.json
{
"Route":{
"about":"About",
"dashboard":"Dashboard",
"system-manage":"System Manage",
"internationalization":"Internationalization"
}
}
// zh.json
{
"Route":{
"about":"关于",
"dashboard":"仪表盘",
"system-manage":"系统管理",
"internationalization":"国际化"
}
}
- 根目录的
next.config.ts文件设置插件：
import type { NextConfig } from "next";
import createNextIntlPlugin from 'next-intl/plugin';
const withNextIntl = createNextIntlPlugin();
const nextConfig: NextConfig = {};
export default withNextIntl(nextConfig);
- 新建
src/i18n/config.ts文件，写入配置：
export type Locale = (typeof locales)[number];
export const locales = ['zh', 'en'] as const;
export const defaultLocale: Locale = 'zh';
- 新建
src/i18n/request.ts文件，创建一个请求范围的配置对象：
import { getRequestConfig } from 'next-intl/server';
import { getLocale } from '@/i18n';
export default getRequestConfig(async () => {
const locale = await getLocale();
return {
locale,
messages: (await import(`../../messages/${locale}.json`)).default,
};
});
- 新建
src/i18n/index.ts文件，用于服务端获取和设置语言
'use server';
import { cookies } from 'next/headers';
import { defaultLocale, Locale } from '@/i18n/config';
// In this example the locale is read from a cookie. You could alternatively
// also read it from a database, backend service, or any other source.
const COOKIE_NAME = 'NEXT_LOCALE';
export async function getLocale() {
return (await cookies()).get(COOKIE_NAME)?.value || defaultLocale;
}
export async function setLocale(locale: Locale) {
(await cookies()).set(COOKIE_NAME, locale);
}
-
app/layout.tsx文件配置NextIntlClientProvider：
import {NextIntlClientProvider} from 'next-intl';
import {getLocale, getMessages} from 'next-intl/server';
export default async function RootLayout({
children
}: {
children: React.ReactNode;
}) {
const locale = await getLocale();
// Providing all messages to the client
// side is the easiest way to get started
const messages = await getMessages();
return (
<html lang={locale}>
<body>
<NextIntlClientProvider messages={messages}>
{children}
</NextIntlClientProvider>
</body>
</html>
);
}
- 在文件中使用：
import { useTranslations } from 'next-intl';
export default function Dashboard() {
const t = useTranslations('Route');
return (
<h1>
{t('dashboard')}
</h1>
);
}
切换语言
- 新建
src/components/LangSwitch/index.tsx文件：
'use client';
import { useLocale } from 'next-intl';
import { Button } from '@/components/ui/button';
import { setLocale } from '@/i18n';
import { type Locale, locales } from '@/i18n/config';
export default function LangSwitch() {
const [ZH, EN] = locales;
const locale = useLocale();
// 切换语言
function onChangeLang(value: Locale) {
const locale = value as Locale;
setLocale(locale);
}
return (
<Button variant="ghost" size="icon" onClick={() => onChangeLang(locale === ZH ? EN : ZH)}>
{locale === ZH ? '中' : 'EN'}
<span className="sr-only">Toggle Lang</span>
</Button>
);
}
- 在需要的位置引入组件：
import LangSwitch from '@/components/LangSwitch';
<LangSwitch />
最终效果
etz3e3pi4xobn897h8inafbcsevk2lr3.gif
总结
这样的国际化方案切换语言的时候，路由就不会发生变化，更好地保留应用程序的原样，并且将当前语言的 key 存储到浏览器 cookie 中，刷新浏览器当前语言并不会失效，可以达到我们想要的效果。
Github 仓库：next-admin
