国际化（i18n）是设计应用程序的过程，使其能够轻松适应不同的语言和地区，而无需进行工程更改。在本文中，您将学习如何在 next.js 应用程序中设置 i18n 并使用 next-intl 创建语言切换器以在英语和西班牙语之间切换。
安装
首先，您需要安装 next-intl 库，它有助于管理 next.js 中的国际化。在终端中运行以下命令：
npm install next-intl
项目结构
项目结构如下：
├── messages
│ ├── en.json
│ └── es.json
├── next.config.mjs
└── src
├── i18n.ts
├── middleware.ts
└── app
└── [locale]
├── layout.tsx
└── page.tsx
1. 设置翻译消息
在项目的根目录下创建一个 messages 目录。在此目录中，为您想要支持的每种语言添加 json 文件。
消息/en.json
{
"greeting": "hello codú",
"farewell": "goodbye codú"
}
消息/es.json
{
"greeting": "hola codú",
"farewell": "adiós codú"
}
这些文件包含您的应用程序将使用的短语的翻译。
2. 配置next.js
在 next.config.mjs 中配置 next.js 以支持国际化。
下一个配置.mjs
import { getrequestconfig } from 'next-intl/server';
// list of supported languages
const locales = ['en', 'es'];
export default getrequestconfig(async ({ locale }) => {
// validate that the incoming `locale` parameter is valid
if (!locales.includes(locale)) {
return { notfound: true };
}
return {
messages: (await import(`./messages/${locale}.json`)).default
};
});
此文件配置 next.js 以根据请求的语言加载正确的翻译消息。
3. 国际化中间件
创建中间件来处理重定向和设置默认语言。
src/中间件.ts
import createmiddleware from 'next-intl/middleware';
export default createmiddleware({
// list of all supported languages
locales: ['en', 'es'],
// default language
defaultlocale: 'en'
});
export const config = {
// only match internationalised pathnames
matcher: ['/', '/(en|es)/:path*']
};
如果未指定，此中间件会处理重定向到默认语言。
4. 国际化配置
创建配置文件来管理国际化设置。
src/i18n.ts
import { notfound } from 'next/navigation';
import { getrequestconfig } from 'next-intl/server';
const locales = ['en', 'es'];
export default getrequestconfig(async ({ locale }) => {
if (!locales.includes(locale as any)) notfound();
return {
messages: (await import(`../messages/${locale}.json`)).default
};
});
此文件验证区域设置并加载相应的消息。
5. 设置布局和页面
配置布局和主页以支持国际化。
src/app/[语言环境]/layout.tsx
import { uselocale } from 'next-intl';
import { reactnode } from 'react';
export default function layout({ children }: { children: reactnode }) {
const locale = uselocale();
return (
{children}
);
}
src/app/[语言环境]/page.tsx
import { usetranslations } from 'next-intl';
export default function page() {
const t = usetranslations();
return (
<div>
<h1>{t('greeting')}</h1>
<p>{t('farewell')}</p>
</div>
);
}
这些文件配置布局和主页以使用翻译。
6. 创建语言切换器
最后，创建一个语言切换器以在英语和西班牙语之间切换。
src/app/[语言环境]/switcher.tsx
'use client';
import { useLocale } from 'next-intl';
import { useRouter } from 'next/navigation';
import { ChangeEvent, useTransition } from 'react';
export default function LocalSwitcher() {
const [isPending, startTransition] = useTransition();
const router = useRouter();
const localActive = useLocale();
const onSelectChange = (e: ChangeEvent<htmlselectelement>) => {
const nextLocale = e.target.value;
startTransition(() => {
router.replace(`/${nextLocale}`);
});
};
return (
<label classname="border-2 rounded">
<p classname="sr-only">Change language</p>
<select defaultvalue="{localActive}" classname="bg-transparent py-2" onchange="{onSelectChange}" disabled><option value="en">English</option>
<option value="es">Spanish</option></select></label>
);
}
</htmlselectelement>
该组件允许用户更改界面语言。
结论
通过这些步骤，您已成功在 next.js 应用程序中设置国际化，并创建了一个语言切换器以在英语和西班牙语之间切换。这将使您的应用程序支持多种语言并提供本地化的用户体验。
本站部分资源来源于网络，仅限用于学习和研究目的，请勿用于其他用途。
如有侵权请发送邮件至1943759704@qq.com删除
码农资源网 » Nextjs 中的路由国际化指南 (i)
