ミドルウェア

概要

このガイドでは、gt-next の組み込みミドルウェアを使用して、Next.js アプリケーションに i18n ミドルウェアルーティングとローカライズされたパスを追加する方法を説明します。

i18n ミドルウェアルーティングとは？

各言語ごとに新しいルートを作成することで、ウェブサイトがよりユーザーフレンドリーになり、SEO の向上にもつながります。 i18n ルーティングを使うと、特定の URL を異なるロケールに関連付けることができます。 例えば、英語の場合は /en/airplanes、中国語の場合は /zh/airplanes などのように設定できます。

ローカライズされたパスを使うことで、さらに一歩進んだ対応が可能です。 これは i18n ルーティングを拡張したもので、ロケールごとにエイリアスパスを指定できます。 例えば、英語の場合は /en/airplanes、中国語の場合は /zh/飞机 などのように指定できます。

i18n ルーティングの設定

Next.js アプリケーションに i18n ルーティングを追加するための、簡単な2つのステップをご案内します。

ステップ 1: 動的ルートを追加する

アプリフォルダ内に [locale] というディレクトリ（例: app/[locale]）を挿入します。 このディレクトリの下に、すべてのページとレイアウトを含めてください。

app/ 内のすべての特殊ファイルが app/[locale] の下にネストされていることを確認してください。

ステップ 2: ミドルウェアファイルを追加する

Next.js では、ルートディレクトリ内に middleware.js（TypeScript を使用している場合は .ts）というファイルを作成します。 src/ フォルダを使用している場合は、代わりに src/middleware.js（または .ts）に配置してください。 ファイルに createNextMiddleware() 関数を追加します。

import { createNextMiddleware } from 'gt-next/middleware'

export default createNextMiddleware();

export const config = {
  matcher: [
    /*
      * Match all request paths except for the ones starting with:
      * - api (API routes)
      * - _next (internal files)
      * - static files
      */
    "/((?!api|static|.*\\..*|_next).*)",
  ],
}

ローカライズされたパスを設定する

middleware ファイルの pathConfig オプションを使って、ローカライズされたパスを指定できます。

export default createNextMiddleware({
  pathConfig: {
    // You can specify a shared path (optional)
    // This will create "/en/about" and "/zh/about"
    "/about": "/about",

    // Specify localized paths
    // This will create "/en/airplanes" and "/zh/飞机"
    "/airplanes": {
      "zh": "/飞机",
    }

    // Add dynamic path parameters
    // This will create "/en/airports/123" and "/zh/飞机机场/123"
    "/airports/[id]": {
      "zh": "/飞机机场/[id]",
    }
  },
});

この例では、/en/about のデフォルトパスと、/en/airplanes および /en/airports/[id] のローカライズされたパスを作成しています。 中国語では、それぞれ /zh/about、/zh/飞机、/zh/飞机机场/[id] にエイリアスされます。

ルーティングの挙動

デフォルトロケールのプレフィックス付与

デフォルトでは、defaultLocale（つまりアプリのデフォルト言語）は、URLにロケールコードがプレフィックスとして付与されません。 例えば、デフォルトロケールが en で、/about というページがある場合、英語では /about でアクセスできます。 しかし、中国語の場合は /zh/about で中国語のページにアクセスできます。

この挙動を望まない場合は、ミドルウェアの設定で prefixDefaultLocale を false に設定することで無効にできます。

ロケールの検出とリダイレクト

ミドルウェアはユーザーのロケールを、(1) URLパスのロケール、(2) リファラーのロケール、(3) ブラウザの受け入れ言語、(4) 最後に defaultLocale の順で検出します。 その後、ユーザーは適切なロケールにリダイレクトされます。

ページのローカライズ版が存在する場合は、いつでもローカライズされたURLにリダイレクトされます。 例えば、/zh/airplanes は常に /zh/飞机 にリダイレクトされます。

エッジケース：ロケールプレフィックスなしのローカライズパス

ロケールのプレフィックスがないローカライズパス（例：/飞机）に移動した場合、ミドルウェアは現在のロケールだと判断したものをそのパスにプレフィックスとして付与します。

例えば、/飞机 にアクセスした際、ミドルウェアが明示的にロケールを zh と認識している場合のみ、/zh/飞机 にリダイレクトされます。 これは便利ですが、ミドルウェアがロケールを zh だと認識している場合のみ機能します。

それ以外の場合は、現在のロケールがパスにプレフィックスされます。 例えば、/飞机 にアクセスした際、ミドルウェアがロケールを en だと認識している場合、/en/飞机 にリダイレクトされます。 この場合、404エラーとなります。

プロジェクト内のリンクには常に defaultLocale のパスを使用することを推奨します。 これにより、常に自動的に正しいロケールのローカライズパスにリダイレクトされます。

<Link href="/about">About</Link>
<Link href="/planes">Planes</Link>
<Link href="/airports/123">Airport 123</Link>

明示的に別のロケールへのリンクを作成したい場合は、ローカライズされたパスを使用してください。

<Link href="/zh/about">About in Chinese</Link>
<Link href="/zh/飞机">Planes in Chinese</Link>
<Link href="/zh/飞机机场/123">Airport 123 in Chinese</Link>

注意事項

• i18nルーティングはアプリケーションのURL構造を変更します。各言語ごとに独自のURLがあります。
• ルーティングロジックを処理するためにmiddlewareファイルが必要です。
• サポートするロケールは、middlewareの設定およびnext configファイルで指定できます。

次のステップ

• createNextMiddleware() のAPIドキュメントをご覧ください。