TL;DR

この記事では、Web ページで頻繁に使用される Next.js のリダイレクトの実装方法について解説します。特別なプログラミングは必要なく、next.config.jsファイルに設定を追加するだけで実装できます。

リダイレクトの実装

例えば、 https://XXXX/archives/495 を https://XXXX/495 にリダイレクトさせるには、どうすればよいのでしょうか？

Next.js と Vercel を使用している場合、next.config.jsファイルにリダイレクトの設定を追加できます。

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  async redirects() {
    return [
      {
        source: '/archives/:slug',
        destination: '/:slug',
        permanent: true,
      },
    ]
  },
}

module.exports = nextConfig

この設定では、/archives/495のような URL が/495にリダイレクトされます。:slugという部分は動的な部分を表しており、ここには任意の文字列が入ることができます。非常に簡単ですね。.htaccess を使わなくていいのは、とても楽です。

ビルドとデプロイ

これを設定したら、再度ビルドとデプロイを行う必要があります。

なお、permanent: trueは 301（恒久的な）リダイレクトを指定するものです。これは、ブラウザがリダイレクト先を記憶するため、SEO に有利です。一方で、permanent: falseを指定すると 302（一時的な）リダイレクトになります。

以上の方法でリダイレクトを設定することができます。試してみてください。

オプション

Next.js のリダイレクトにはいくつかの追加オプションがあります。

basePath (boolean)

リダイレクトが basePath を無視するかどうかを制御します。デフォルトは false です。

locale (boolean)

リダイレクトがロケールを無視するかどうかを制御します。デフォルトは false です。

例えば、basePathを無視したい場合は次のように設定できます:

const nextConfig = {
  async redirects() {
    return [
      {
        source: '/archives/:slug',
        destination: '/:slug',
        permanent: true,
        basePath: false,
      },
    ]
  },
}

これらのオプションは、より具体的なリダイレクトの振る舞いを制御するために使われます。また、リダイレクトだけでなく、リライトやヘッダーのカスタマイズも next.config.js ファイルで行うことができます。これらの詳細については、Next.js の公式ドキュメンテーションをご覧ください。

next.config.js Options: redirects | Next.js