Nextjs 中的路由国际化指南 (i)

百变鹏仔 3天前 #JavaScript

文章标签路由

国际化（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 languagesconst locales = ['en', 'es'];export default getrequestconfig(async ({ locale }) =&gt; {  // 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 }) =&gt; {  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>) =&gt; {    const nextLocale = e.target.value;    startTransition(() =&gt; {      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 应用程序中设置国际化，并创建了一个语言切换器以在英语和西班牙语之间切换。这将使您的应用程序支持多种语言并提供本地化的用户体验。

文章推荐