リダイレクト

リダイレクトを使用すると、受信したリクエストパスを別の宛先パスに転送できます。

リダイレクトを使用するには、next.config.jsredirectsキーを使用します:

next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/about',
        destination: '/',
        permanent: true,
      },
    ]
  },
}

redirectsは非同期関数で、sourcedestinationpermanentプロパティを持つオブジェクトの配列を返す必要があります:

  • source:受信リクエストのパスパターン
  • destination:ルーティングしたいパス
  • permanenttrueまたはfalse - trueの場合、クライアント/検索エンジンにリダイレクトを永久にキャッシュするよう指示する308ステータスコードを使用し、falseの場合、一時的でキャッシュされない307ステータスコードを使用します

Next.jsが307と308を使用する理由:従来、一時的なリダイレクトには302、永久的なリダイレクトには301が使用されていましたが、多くのブラウザは元のメソッドに関係なく、リダイレクトのリクエストメソッドをGETに変更していました。例えば、ブラウザがPOST /v1/usersにリクエストを送信し、ステータスコード302とロケーション/v2/usersが返された場合、後続のリクエストは期待されるPOST /v2/usersではなくGET /v2/usersになる可能性があります。Next.jsはリクエストメソッドを明示的に保持するために、307(一時的)と308(永久的)のリダイレクトステータスコードを使用します。

  • basePathfalseまたはundefined - falseの場合、basePathはマッチング時に含まれません。外部リダイレクトのみに使用できます
  • localefalseまたはundefined - マッチング時にロケールを含めるかどうか
  • hashasオブジェクトの配列で、typekeyvalueプロパティを持ちます
  • missingmissingオブジェクトの配列で、typekeyvalueプロパティを持ちます

リダイレクトは、ページや/publicファイルを含むファイルシステムよりも前にチェックされます。

リダイレクトは、ミドルウェアが存在してパスにマッチしない限り、クライアントサイドルーティング(Linkrouter.push)には適用されません。

リダイレクトが適用されると、リクエストで提供されたクエリ値はリダイレクト先に渡されます。例えば、次のリダイレクト設定を参照してください:

{
  source: '/old-blog/:path*',
  destination: '/blog/:path*',
  permanent: false
}

/old-blog/post-1?hello=worldがリクエストされると、クライアントは/blog/post-1?hello=worldにリダイレクトされます。

パスマッチング

パスマッチングが可能です。例えば、/old-blog/:slug/old-blog/hello-worldにマッチします(ネストされたパスは含まれません):

next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/old-blog/:slug',
        destination: '/news/:slug', // マッチしたパラメータを宛先で使用可能
        permanent: true,
      },
    ]
  },
}

ワイルドカードパスマッチング

ワイルドカードパスにマッチさせるには、パラメータの後に*を使用します。例えば、/blog/:slug*/blog/a/b/c/d/hello-worldにマッチします:

next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/blog/:slug*',
        destination: '/news/:slug*', // マッチしたパラメータを宛先で使用可能
        permanent: true,
      },
    ]
  },
}

正規表現パスマッチング

正規表現パスにマッチさせるには、パラメータの後に正規表現を括弧で囲みます。例えば、/post/:slug(\\d{1,})/post/123にマッチしますが、/post/abcにはマッチしません:

next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/post/:slug(\\d{1,})',
        destination: '/news/:slug', // マッチしたパラメータを宛先で使用可能
        permanent: false,
      },
    ]
  },
}

以下の文字(){}:*+?は正規表現パスマッチングに使用されるため、sourceで特殊値として使用されない場合は、\\を前に付けてエスケープする必要があります:

next.config.js
module.exports = {
  async redirects() {
    return [
      {
        // これは`/english(default)/something`がリクエストされた場合にマッチします
        source: '/english\\(default\\)/:slug',
        destination: '/en-us/:slug',
        permanent: false,
      },
    ]
  },
}

ヘッダー、クッキー、クエリのマッチング

リダイレクトをヘッダー、クッキー、またはクエリ値が一致する場合にのみ適用するには、hasフィールドを使用するか、missingフィールドが一致しない場合に適用できます。リダイレクトが適用されるためには、sourceとすべてのhasアイテムが一致し、すべてのmissingアイテムが一致しない必要があります。

hasmissingアイテムは以下のフィールドを持つことができます:

  • typeString - headercookiehost、またはqueryのいずれかでなければなりません
  • keyString - マッチングする選択されたタイプのキー
  • valueStringまたはundefined - チェックする値。undefinedの場合、任意の値がマッチします。値の特定の部分をキャプチャするために正規表現のような文字列を使用できます。例えば、first-(?<paramName>.*)という値がfirst-secondに使用された場合、second:paramNameで宛先で使用可能になります
next.config.js
module.exports = {
  async redirects() {
    return [
      // ヘッダー`x-redirect-me`が存在する場合、
      // このリダイレクトが適用されます
      {
        source: '/:path((?!another-page$).*)',
        has: [
          {
            type: 'header',
            key: 'x-redirect-me',
          },
        ],
        permanent: false,
        destination: '/another-page',
      },
      // ヘッダー`x-dont-redirect`が存在する場合、
      // このリダイレクトは適用されません
      {
        source: '/:path((?!another-page$).*)',
        missing: [
          {
            type: 'header',
            key: 'x-do-not-redirect',
          },
        ],
        permanent: false,
        destination: '/another-page',
      },
      // ソース、クエリ、クッキーが一致する場合、
      // このリダイレクトが適用されます
      {
        source: '/specific/:path*',
        has: [
          {
            type: 'query',
            key: 'page',
            // 値が提供され、名前付きキャプチャグループ(例:(?<page>home))が使用されていないため、
            // ページ値は宛先で利用できません
            value: 'home',
          },
          {
            type: 'cookie',
            key: 'authorized',
            value: 'true',
          },
        ],
        permanent: false,
        destination: '/another/:path*',
      },
      // ヘッダー`x-authorized`が存在し、
      // 一致する値が含まれている場合、このリダイレクトが適用されます
      {
        source: '/',
        has: [
          {
            type: 'header',
            key: 'x-authorized',
            value: '(?<authorized>yes|true)',
          },
        ],
        permanent: false,
        destination: '/home?authorized=:authorized',
      },
      // ホストが`example.com`の場合、
      // このリダイレクトが適用されます
      {
        source: '/:path((?!another-page$).*)',
        has: [
          {
            type: 'host',
            value: 'example.com',
          },
        ],
        permanent: false,
        destination: '/another-page',
      },
    ]
  },
}

basePathサポート付きリダイレクト

basePathサポートをリダイレクトで活用する場合、各sourcedestinationには自動的にbasePathがプレフィックスとして追加されます。ただし、リダイレクトにbasePath: falseを追加した場合は除きます:

next.config.js
module.exports = {
  basePath: '/docs',

  async redirects() {
    return [
      {
        source: '/with-basePath', // 自動的に/docs/with-basePathになります
        destination: '/another', // 自動的に/docs/anotherになります
        permanent: false,
      },
      {
        // basePath: falseが設定されているため/docsを追加しません
        source: '/without-basePath',
        destination: 'https://example.com',
        basePath: false,
        permanent: false,
      },
    ]
  },
}

i18nサポート付きリダイレクト

i18nサポートをリダイレクトで活用する場合、各sourcedestinationには設定されたlocalesを処理するために自動的にプレフィックスが追加されます。ただし、リダイレクトにlocale: falseを追加した場合は除きます。locale: falseを使用する場合は、sourcedestinationにロケールをプレフィックスとして追加して正しくマッチさせる必要があります。

next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'fr', 'de'],
    defaultLocale: 'en',
  },

  async redirects() {
    return [
      {
        source: '/with-locale', // すべてのロケールを自動的に処理します
        destination: '/another', // ロケールを自動的に渡します
        permanent: false,
      },
      {
        // locale: falseが設定されているため、ロケールを自動的に処理しません
        source: '/nl/with-locale-manual',
        destination: '/nl/another',
        locale: false,
        permanent: false,
      },
      {
        // `en`がdefaultLocaleであるため、'/'にマッチします
        source: '/en',
        destination: '/en/another',
        locale: false,
        permanent: false,
      },
      // locale: falseが設定されていても、すべてのロケールをマッチさせることが可能です
      {
        source: '/:locale/page',
        destination: '/en/newpage',
        permanent: false,
        locale: false,
      },
      {
        // これは/(en|fr|de)/(.*)に変換されるため、
        // `/:path*`のようにトップレベルの`/`や`/fr`ルートにはマッチしません
        source: '/(.*)',
        destination: '/another',
        permanent: false,
      },
    ]
  },
}

まれなケースでは、古いHTTPクライアントが適切にリダイレクトするためにカスタムステータスコードを割り当てる必要がある場合があります。これらの場合、permanentプロパティの代わりにstatusCodeプロパティを使用できますが、両方は使用できません。IE11との互換性を確保するために、308ステータスコードには自動的にRefreshヘッダーが追加されます。

その他のリダイレクト

バージョン履歴

バージョン変更内容
v13.3.0missingを追加
v10.2.0hasを追加
v9.5.0redirectsを追加