国际化 (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. 设置翻译消息

在项目的根目录下创建一个消息目录。在此目录中，为您想要支持的每种语言添加 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 (
    

      
{t('greeting')}
      
{t('farewell')}
    
  );
}

这些文件配置布局和主页以使用翻译。

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) => {
    const nextLocale = e.target.value;
    startTransition(() => {
      router.replace(`/${nextLocale}`);
    });
  };

  return (
    
      
Change language
      
        English
        Spanish
      
    
  );
}

该组件允许用户更改界面语言。

结论

通过这些步骤，您已成功在 Next.js 应用程序中设置国际化，并创建了一个语言切换器以在英语和西班牙语之间切换。这将使您的应用程序支持多种语言并提供本地化的用户体验。