跳到主要內容
建置您的應用程式路由國際化

國際化

Next.js 讓您能夠設定路由和內容渲染，以支援多種語言。讓您的網站適應不同的語言環境，包括翻譯內容 (本地化) 和國際化的路由。

術語

  • 語言環境： 一組語言和格式偏好的識別符。這通常包括使用者偏好的語言，以及可能的地理區域。
    • en-US：在美國使用的英語
    • nl-NL：在荷蘭使用的荷蘭語
    • nl：荷蘭語，無特定區域

路由概觀

建議使用使用者在瀏覽器中的語言偏好設定來選擇要使用的語言環境。變更您的偏好語言將修改傳入您應用程式的 Accept-Language 標頭。

例如，使用以下程式庫，您可以查看傳入的 Request，根據 Headers、您計劃支援的語言環境和預設語言環境，判斷要選擇哪種語言環境。

middleware.js
import { match } from '@formatjs/intl-localematcher'
import Negotiator from 'negotiator'
 
let headers = { 'accept-language': 'en-US,en;q=0.5' }
let languages = new Negotiator({ headers }).languages()
let locales = ['en-US', 'nl-NL', 'nl']
let defaultLocale = 'en-US'
 
match(languages, locales, defaultLocale) // -> 'en-US'

路由可以透過子路徑 (/fr/products) 或網域 (my-site.fr/products) 進行國際化。有了這些資訊，您現在可以根據 中介層 內的語言環境重新導向使用者。

middleware.js
import { NextResponse } from "next/server";
 
let locales = ['en-US', 'nl-NL', 'nl']
 
// Get the preferred locale, similar to the above or using a library
function getLocale(request) { ... }
 
export function middleware(request) {
  // Check if there is any supported locale in the pathname
  const { pathname } = request.nextUrl
  const pathnameHasLocale = locales.some(
    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
  )
 
  if (pathnameHasLocale) return
 
  // Redirect if there is no locale
  const locale = getLocale(request)
  request.nextUrl.pathname = `/${locale}${pathname}`
  // e.g. incoming request is /products
  // The new URL is now /en-US/products
  return NextResponse.redirect(request.nextUrl)
}
 
export const config = {
  matcher: [
    // Skip all internal paths (_next)
    '/((?!_next).*)',
    // Optional: only run on root (/) URL
    // '/'
  ],
}

最後，請確保 app/ 內的所有特殊檔案都巢狀於 app/[lang] 下。這使 Next.js 路由器能夠動態處理路由中不同的語言環境，並將 lang 參數轉發到每個版面配置和頁面。例如

app/[lang]/page.tsx
// You now have access to the current locale
// e.g. /en-US/products -> `lang` is "en-US"
export default async function Page({
  params,
}: {
  params: Promise<{ lang: string }>
}) {
  const lang = (await params).lang;
  return ...
}

根版面配置也可以巢狀於新資料夾中 (例如 app/[lang]/layout.js)。

本地化

根據使用者偏好的語言環境變更顯示的內容 (或本地化) 並非 Next.js 特有的功能。以下描述的模式適用於任何網頁應用程式。

假設我們想要在應用程式內同時支援英文和荷蘭文內容。我們可以維護兩個不同的「字典」，它們是將某些鍵映射到本地化字串的物件。例如

dictionaries/en.json
{
  "products": {
    "cart": "Add to Cart"
  }
}
dictionaries/nl.json
{
  "products": {
    "cart": "Toevoegen aan Winkelwagen"
  }
}

然後，我們可以建立一個 getDictionary 函式，以載入所請求語言環境的翻譯

app/[lang]/dictionaries.ts
import 'server-only'
 
const dictionaries = {
  en: () => import('./dictionaries/en.json').then((module) => module.default),
  nl: () => import('./dictionaries/nl.json').then((module) => module.default),
}
 
export const getDictionary = async (locale: 'en' | 'nl') =>
  dictionaries[locale]()

根據目前選取的語言，我們可以在版面配置或頁面內獲取字典。

app/[lang]/page.tsx
import { getDictionary } from './dictionaries'
 
export default async function Page({
  params,
}: {
  params: Promise<{ lang: 'en' | 'nl' }>
}) {
  const lang = (await params).lang
  const dict = await getDictionary(lang) // en
  return <button>{dict.products.cart}</button> // Add to Cart
}

由於 app/ 目錄中的所有版面配置和頁面預設為 伺服器組件，因此我們不必擔心翻譯檔案的大小會影響我們的客戶端 JavaScript 捆綁包大小。此程式碼將僅在伺服器上執行，並且只有產生的 HTML 會傳送到瀏覽器。

靜態生成

若要為給定的一組語言環境產生靜態路由，我們可以在任何頁面或版面配置中使用 generateStaticParams。這可以是全域的，例如，在根版面配置中

app/[lang]/layout.tsx
export async function generateStaticParams() {
  return [{ lang: 'en-US' }, { lang: 'de' }]
}
 
export default async function RootLayout({
  children,
  params,
}: Readonly<{
  children: React.ReactNode
  params: Promise<{ lang: 'en-US' | 'de' }>
}>) {
  return (
    <html lang={(await params).lang}>
      <body>{children}</body>
    </html>
  )
}

資源