[Next.js] Next.jsでリダイレクトを実装する方法：基本的な手順とステータスコードの使い分け

Next.jsの基本的なリダイレクト方法

1. サーバーサイドでのリダイレクト

サーバーサイドでのリダイレクトは、リクエストを受け取ったサーバーが直接リダイレクト先にレスポンスを返す方法です。Next.jsでは、getServerSidePropsを使用して、サーバーサイドでのリダイレクトを実現することができます。

getServerSideProps.js

export async function getServerSideProps(context) {
  return {
    redirect: {
      destination: '/new-path',
      permanent: false,
    },
  }
}

なお、contextオブジェクトには、以下のような情報が含まれます。

context.params: URLのパラメータを含むオブジェクト。
context.query: クエリパラメータを含むオブジェクト。
context.req: クライアントからのリクエストに関する情報を含むオブジェクト。
context.res: クライアントへのレスポンスに関する情報を含むオブジェクト。
context.preview: プレビューモードに関する情報を含むオブジェクト（getStaticPropsの場合にのみ含まれる）。
context.previewData: プレビューモードで使用するデータを含むオブジェクト（getStaticPropsの場合にのみ含まれる）。
context.locale: 使用する言語のロケールを示す文字列（i18nを使用している場合にのみ含まれる）。

2. クライアントサイドでのリダイレクト

クライアントサイドでのリダイレクトは、ページがブラウザに読み込まれた後にJavaScriptを使用してリダイレクトする方法です。Next.jsでは、useRouterフックを使用して、クライアントサイドでのリダイレクトを実現することができます。

Home.jsx

import { useRouter } from 'next/router'

function Home() {
  const router = useRouter()

  function handleClick() {
    router.push('/new-path')
  }

  return (
    <div>
      <button onClick={handleClick}>Go to new path</button>
    </div>
  )
}

export default Home

リダイレクトに使用するステータスコード

301リダイレクト

301リダイレクトは、永久的なリダイレクトを示すステータスコードです。リクエストされたリソースが移動し、今後は新しい場所で見つけることができることを示します。301リダイレクトを返すと、ブラウザーは新しいURLに自動的に転送します。

301.js

export async function getServerSideProps(context) {
  return {
    redirect: {
      destination: '/new-path',
      permanent: true,
    },
  }
}

302リダイレクト

302リダイレクトは、一時的なリダイレクトを示すステータスコードです。リクエストされたリソースが一時的に移動し、将来的に元の場所で見つけることができることを示します。

302.js

export async function getServerSideProps(context) {
  return {
    redirect: {
      destination: '/new-path',
      permanent: false,
    },
  }
}

307リダイレクト

307リダイレクトは、302リダイレクトと同様に一時的なリダイレクトを示すステータスコードですが、POSTリクエストに対して使用することができます。

307.js

export async function getServerSideProps(context) {
  return {
    redirect: {
      destination: '/new-path',
      statusCode: 307,
    },
  }
}

308リダイレクト

308リダイレクトは、301リダイレクトと同様に永久的なリダイレクトを示すステータスコードです。リクエストされたリソースが移動し、今後は新しい場所で見つけることができることを示します。308リダイレクトを返すと、ブラウザーは新しいURLに自動的に転送します。

308.js

export async function getServerSideProps(context) {
  return {
    redirect: {
      destination: '/new-path',
      statusCode: 308,
    },
  }
}

パラメータ付きリダイレクト

パラメータ付きリダイレクトは、リダイレクト先のURLにパラメータを付加してリダイレクトする方法です。パラメータを付加することで、リダイレクト先のページで特定の動作をさせることができます。

パラメータ付きリダイレクトは、クエリパラメータとパスパラメータの2種類があります。

1. クエリパラメータの追加

クエリパラメータを追加する場合は、リダイレクト先のURLの末尾に「?」を付け、パラメータを追加します。複数のパラメータを追加する場合は、「&」で区切ります。

export async function getServerSideProps(context) {
  return {
    redirect: {
      destination: '/new-path?param1=value1&param2=value2',
      permanent: false,
    },
  }
}

2. パスパラメータの追加

パスパラメータを追加する場合は、リダイレクト先のURLのパスの一部としてパラメータを追加します。パラメータは「[ ]」で囲み、動的な部分を示します。

export async function getServerSideProps(context) {
  return {
    redirect: {
      destination: '/new-path/[id]',
      permanent: false,
    },
    // `id` will be available as a query param
    // ex: /new-path/1234 will redirect to /new-path?id=1234
    query: { id: '1234' },
  }
}

リダイレクトのデバッグ方法

リダイレクトのデバッグ方法は、主に以下の2つの方法があります。

1. ブラウザのデベロッパーツールを使用する方法

ブラウザのデベロッパーツールを使用することで、リダイレクトの詳細を確認することができます。Chromeブラウザを例に挙げると、デベロッパーツールを開いて、ネットワークタブを選択します。次に、リダイレクトが発生するURLにアクセスすると、リダイレクトに関する情報が表示されます。リダイレクトのステータスコードや、リダイレクト先のURLなどを確認することができます。

2. console.log()を使用する方法

console.log()を使用して、リダイレクトの処理の流れを確認することができます。例えば、以下のように、getServerSideProps内でリダイレクトが発生する場合に、ログを出力することができます。

export async function getServerSideProps(context) {
  if (/* リダイレクトの条件 */) {
    console.log('リダイレクトが発生しました')
    return {
      redirect: {
        destination: '/new-path',
        permanent: false,
      },
    }
  }

  return {
    props: {},
  }
}

まとめ

この記事では、Next.jsでの基本的なリダイレクト方法について説明しました。サーバーサイドでのリダイレクトは、getServerSidePropsを使用して実現でき、クライアントサイドでのリダイレクトは、useRouterフックを使用して実現できます。また、リダイレクトに使用するステータスコードについても説明しました。

さらに、パラメータ付きリダイレクトについても説明し、クエリパラメータとパスパラメータの追加方法を示しました。最後に、リダイレクトのデバッグ方法についても説明し、ブラウザのデベロッパーツールやconsole.log()を使用する方法を紹介しました。