Next.js 中的路由國際化指南 (i)-js教程-PHP中文網

Next.js 中的路由國際化指南 (i)

WBOY

發布： 2024-07-17 16:13:27

原創

892 人瀏覽過

Guide to Internationalisation (i) in Next.js with Routing

國際化 (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 (
    <html lang={locale}>
      <body>{children}</body>
    </html>
  );
}

登入後複製

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={isPending}
      >
        <option value='en'>English</option>
        <option value='es'>Spanish</option>
      </select>
    </label>
  );
}

登入後複製

該元件允許使用者更改介面語言。