リダイレクト処理

Next.jsではリダイレクトを処理する方法がいくつかあります。このページでは各オプションの使い方、ユースケース、そして大量のリダイレクトを管理する方法について説明します。

API目的使用場所ステータスコード
redirectミューテーションやイベント後のユーザーリダイレクトサーバーコンポーネント、サーバーアクション、ルートハンドラー307 (一時的) または 303 (サーバーアクション)
permanentRedirectミューテーションやイベント後の永続的リダイレクトサーバーコンポーネント、サーバーアクション、ルートハンドラー308 (永続的)
useRouterクライアントサイドナビゲーションの実行クライアントコンポーネントのイベントハンドラーN/A
redirects in next.config.jsパスに基づく受信リクエストのリダイレクトnext.config.js ファイル307 (一時的) または 308 (永続的)
NextResponse.redirect条件に基づく受信リクエストのリダイレクトミドルウェア任意

redirect 関数

redirect 関数を使用すると、ユーザーを別のURLにリダイレクトできます。サーバーコンポーネントルートハンドラーサーバーアクションで呼び出すことができます。

redirect はミューテーションやイベント後に使用されることが一般的です。例えば、投稿作成時:

'use server'

import { redirect } from 'next/navigation'
import { revalidatePath } from 'next/cache'

export async function createPost(id: string) {
  try {
    // データベース呼び出し
  } catch (error) {
    // エラーハンドリング
  }

  revalidatePath('/posts') // キャッシュされた投稿を更新
  redirect(`/post/${id}`) // 新しい投稿ページに移動
}
'use server'

import { redirect } from 'next/navigation'
import { revalidatePath } from 'next/cache'

export async function createPost(id) {
  try {
    // データベース呼び出し
  } catch (error) {
    // エラーハンドリング
  }

  revalidatePath('/posts') // キャッシュされた投稿を更新
  redirect(`/post/${id}`) // 新しい投稿ページに移動
}

知っておくと良いこと:

  • redirect はデフォルトで307 (一時的リダイレクト) ステータスコードを返します。サーバーアクションで使用すると303 (See Other) を返し、POSTリクエストの結果として成功ページにリダイレクトする際によく使用されます。
  • redirect は内部的にエラーをスローするため、try/catch ブロックの外で呼び出す必要があります。
  • redirect はレンダリングプロセス中にクライアントコンポーネントで呼び出せますが、イベントハンドラー内では使用できません。代わりにuseRouter フックを使用してください。
  • redirect は絶対URLも受け付け、外部リンクへのリダイレクトにも使用できます。
  • レンダリングプロセスの前にリダイレクトしたい場合は、next.config.js または ミドルウェアを使用してください。

詳細は redirect APIリファレンス をご覧ください。

permanentRedirect 関数

permanentRedirect 関数を使用すると、ユーザーを永続的に別のURLにリダイレクトできます。サーバーコンポーネントルートハンドラーサーバーアクションで呼び出すことができます。

permanentRedirect は、ユーザー名変更後にプロフィールURLを更新するなど、エンティティの正規URLが変更されるミューテーションやイベント後に使用されます:

'use server'

import { permanentRedirect } from 'next/navigation'
import { revalidateTag } from 'next/cache'

export async function updateUsername(username: string, formData: FormData) {
  try {
    // データベース呼び出し
  } catch (error) {
    // エラーハンドリング
  }

  revalidateTag('username') // ユーザー名参照をすべて更新
  permanentRedirect(`/profile/${username}`) // 新しいユーザープロフィールに移動
}
'use server'

import { permanentRedirect } from 'next/navigation'
import { revalidateTag } from 'next/cache'

export async function updateUsername(username, formData) {
  try {
    // データベース呼び出し
  } catch (error) {
    // エラーハンドリング
  }

  revalidateTag('username') // ユーザー名参照をすべて更新
  permanentRedirect(`/profile/${username}`) // 新しいユーザープロフィールに移動
}

知っておくと良いこと:

  • permanentRedirect はデフォルトで308 (永続的リダイレクト) ステータスコードを返します。
  • permanentRedirect は絶対URLも受け付け、外部リンクへのリダイレクトにも使用できます。
  • レンダリングプロセスの前にリダイレクトしたい場合は、next.config.js または ミドルウェアを使用してください。

詳細は permanentRedirect APIリファレンス をご覧ください。

useRouter() フック

クライアントコンポーネントのイベントハンドラー内でリダイレクトが必要な場合、useRouter フックの push メソッドを使用できます。例:

'use client'

import { useRouter } from 'next/navigation'

export default function Page() {
  const router = useRouter()

  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      ダッシュボード
    </button>
  )
}
'use client'

import { useRouter } from 'next/navigation'

export default function Page() {
  const router = useRouter()

  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      ダッシュボード
    </button>
  )
}

知っておくと良いこと:

  • プログラム的にユーザーをナビゲートする必要がない場合は、<Link> コンポーネントを使用するべきです。

詳細は useRouter APIリファレンス をご覧ください。

next.config.jsredirects

next.config.js ファイルの redirects オプションを使用すると、受信リクエストパスを別の宛先パスにリダイレクトできます。これはページのURL構造を変更した場合や、事前にわかっているリダイレクトのリストがある場合に便利です。

redirectsパスヘッダー、クッキー、クエリマッチングをサポートしており、受信リクエストに基づいてユーザーをリダイレクトする柔軟性を提供します。

redirects を使用するには、next.config.js ファイルにオプションを追加します:

next.config.js
module.exports = {
  async redirects() {
    return [
      // 基本的なリダイレクト
      {
        source: '/about',
        destination: '/',
        permanent: true,
      },
      // ワイルドカードパスマッチング
      {
        source: '/blog/:slug',
        destination: '/news/:slug',
        permanent: true,
      },
    ]
  },
}

詳細は redirects APIリファレンス をご覧ください。

知っておくと良いこと:

  • redirectspermanent オプションで307 (一時的リダイレクト) または308 (永続的リダイレクト) ステータスコードを返せます。
  • プラットフォームによって redirects に制限がある場合があります。例えばVercelでは1,024件のリダイレクト制限があります。大量のリダイレクト(1000件以上)を管理する場合は、ミドルウェアを使用したカスタムソリューションの作成を検討してください。詳細は大規模なリダイレクト管理をご覧ください。
  • redirects はミドルウェアより前に実行されます。

ミドルウェアでの NextResponse.redirect

ミドルウェアを使用すると、リクエストが完了する前にコードを実行できます。そして、受信リクエストに基づいて NextResponse.redirect を使用して別のURLにリダイレクトできます。これは認証やセッション管理などの条件に基づいてユーザーをリダイレクトしたい場合や、大量のリダイレクトがある場合に便利です。

例えば、認証されていないユーザーを /login ページにリダイレクトする場合:

import { NextResponse, NextRequest } from 'next/server'
import { authenticate } from 'auth-provider'

export function middleware(request: NextRequest) {
  const isAuthenticated = authenticate(request)

  // ユーザーが認証されている場合は通常通り続行
  if (isAuthenticated) {
    return NextResponse.next()
  }

  // 認証されていない場合はログインページにリダイレクト
  return NextResponse.redirect(new URL('/login', request.url))
}

export const config = {
  matcher: '/dashboard/:path*',
}
import { NextResponse } from 'next/server'
import { authenticate } from 'auth-provider'

export function middleware(request) {
  const isAuthenticated = authenticate(request)

  // ユーザーが認証されている場合は通常通り続行
  if (isAuthenticated) {
    return NextResponse.next()
  }

  // 認証されていない場合はログインページにリダイレクト
  return NextResponse.redirect(new URL('/login', request.url))
}

export const config = {
  matcher: '/dashboard/:path*',
}

知っておくと良いこと:

  • ミドルウェアは next.config.jsredirects より後に、レンダリングより前に実行されます。

詳細は ミドルウェア ドキュメントをご覧ください。

大規模なリダイレクト管理 (上級)

大量のリダイレクト(1000件以上)を管理するには、ミドルウェアを使用したカスタムソリューションの作成を検討してください。これにより、アプリケーションを再デプロイせずにプログラム的にリダイレクトを処理できます。

これを行うには、以下を考慮する必要があります:

  1. リダイレクトマップの作成と保存
  2. データ検索パフォーマンスの最適化

Next.jsの例: 以下の推奨事項の実装については、Bloomフィルターを使ったミドルウェアの例をご覧ください。

1. リダイレクトマップの作成と保存

リダイレクトマップは、データベース(通常はキーバリューストア)またはJSONファイルに保存できるリダイレクトのリストです。

以下のデータ構造を検討してください:

{
  "/old": {
    "destination": "/new",
    "permanent": true
  },
  "/blog/post-old": {
    "destination": "/blog/post-new",
    "permanent": true
  }
}

ミドルウェアでは、VercelのEdge ConfigRedisなどのデータベースから読み取り、受信リクエストに基づいてユーザーをリダイレクトできます:

import { NextResponse, NextRequest } from 'next/server'
import { get } from '@vercel/edge-config'

type RedirectEntry = {
  destination: string
  permanent: boolean
}

export async function middleware(request: NextRequest) {
  const pathname = request.nextUrl.pathname
  const redirectData = await get(pathname)

  if (redirectData && typeof redirectData === 'string') {
    const redirectEntry: RedirectEntry = JSON.parse(redirectData)
    const statusCode = redirectEntry.permanent ? 308 : 307
    return NextResponse.redirect(redirectEntry.destination, statusCode)
  }

  // リダイレクトが見つからなかった場合はリダイレクトせずに続行
  return NextResponse.next()
}
import { NextResponse } from 'next/server'
import { get } from '@vercel/edge-config'

export async function middleware(request) {
  const pathname = request.nextUrl.pathname
  const redirectData = await get(pathname)

  if (redirectData) {
    const redirectEntry = JSON.parse(redirectData)
    const statusCode = redirectEntry.permanent ? 308 : 307
    return NextResponse.redirect(redirectEntry.destination, statusCode)
  }

  // リダイレクトが見つからなかった場合はリダイレクトせずに続行
  return NextResponse.next()
}

2. データ検索パフォーマンスの最適化

すべての受信リクエストに対して大規模なデータセットを読み込むと、処理が遅くなりコストがかかる場合があります。データ検索パフォーマンスを最適化するには次の2つの方法があります:

  • Vercel Edge ConfigRedis など、高速な読み取りに最適化されたデータベースを使用する
  • ブルームフィルター (Bloom filter) などのデータ検索戦略を使用して、大きなリダイレクトファイルやデータベースを読み込む前にリダイレクトの存在を効率的に確認する

前の例を考慮すると、生成されたブルームフィルターファイルをミドルウェアにインポートし、受信リクエストのパス名がブルームフィルターに存在するかどうかを確認できます。

存在する場合、リクエストを Route Handler(ルートハンドラー) に転送します。これにより実際のファイルをチェックし、ユーザーを適切なURLにリダイレクトします。これにより、すべての受信リクエストを遅くする可能性のある大きなリダイレクトファイルをミドルウェアにインポートすることを回避できます。

import { NextResponse, NextRequest } from 'next/server'
import { ScalableBloomFilter } from 'bloom-filters'
import GeneratedBloomFilter from './redirects/bloom-filter.json'

type RedirectEntry = {
  destination: string
  permanent: boolean
}

// 生成されたJSONファイルからブルームフィルターを初期化
const bloomFilter = ScalableBloomFilter.fromJSON(GeneratedBloomFilter as any)

export async function middleware(request: NextRequest) {
  // 受信リクエストのパスを取得
  const pathname = request.nextUrl.pathname

  // パスがブルームフィルターに存在するか確認
  if (bloomFilter.has(pathname)) {
    // パス名をルートハンドラーに転送
    const api = new URL(
      `/api/redirects?pathname=${encodeURIComponent(request.nextUrl.pathname)}`,
      request.nextUrl.origin
    )

    try {
      // ルートハンドラーからリダイレクトデータを取得
      const redirectData = await fetch(api)

      if (redirectData.ok) {
        const redirectEntry: RedirectEntry | undefined =
          await redirectData.json()

        if (redirectEntry) {
          // ステータスコードを決定
          const statusCode = redirectEntry.permanent ? 308 : 307

          // 宛先にリダイレクト
          return NextResponse.redirect(redirectEntry.destination, statusCode)
        }
      }
    } catch (error) {
      console.error(error)
    }
  }

  // リダイレクトが見つからなかった場合、リダイレクトせずにリクエストを継続
  return NextResponse.next()
}
import { NextResponse } from 'next/server'
import { ScalableBloomFilter } from 'bloom-filters'
import GeneratedBloomFilter from './redirects/bloom-filter.json'

// 生成されたJSONファイルからブルームフィルターを初期化
const bloomFilter = ScalableBloomFilter.fromJSON(GeneratedBloomFilter)

export async function middleware(request) {
  // 受信リクエストのパスを取得
  const pathname = request.nextUrl.pathname

  // パスがブルームフィルターに存在するか確認
  if (bloomFilter.has(pathname)) {
    // パス名をルートハンドラーに転送
    const api = new URL(
      `/api/redirects?pathname=${encodeURIComponent(request.nextUrl.pathname)}`,
      request.nextUrl.origin
    )

    try {
      // ルートハンドラーからリダイレクトデータを取得
      const redirectData = await fetch(api)

      if (redirectData.ok) {
        const redirectEntry = await redirectData.json()

        if (redirectEntry) {
          // ステータスコードを決定
          const statusCode = redirectEntry.permanent ? 308 : 307

          // 宛先にリダイレクト
          return NextResponse.redirect(redirectEntry.destination, statusCode)
        }
      }
    } catch (error) {
      console.error(error)
    }
  }

  // リダイレクトが見つからなかった場合、リダイレクトせずにリクエストを継続
  return NextResponse.next()
}

次に、ルートハンドラー内で:

import { NextRequest, NextResponse } from 'next/server'
import redirects from '@/app/redirects/redirects.json'

type RedirectEntry = {
  destination: string
  permanent: boolean
}

export function GET(request: NextRequest) {
  const pathname = request.nextUrl.searchParams.get('pathname')
  if (!pathname) {
    return new Response('Bad Request', { status: 400 })
  }

  // redirects.jsonファイルからリダイレクトエントリを取得
  const redirect = (redirects as Record<string, RedirectEntry>)[pathname]

  // ブルームフィルターの偽陽性を考慮
  if (!redirect) {
    return new Response('No redirect', { status: 400 })
  }

  // リダイレクトエントリを返す
  return NextResponse.json(redirect)
}
import { NextResponse } from 'next/server'
import redirects from '@/app/redirects/redirects.json'

export function GET(request) {
  const pathname = request.nextUrl.searchParams.get('pathname')
  if (!pathname) {
    return new Response('Bad Request', { status: 400 })
  }

  // redirects.jsonファイルからリダイレクトエントリを取得
  const redirect = redirects[pathname]

  // ブルームフィルターの偽陽性を考慮
  if (!redirect) {
    return new Response('No redirect', { status: 400 })
  }

  // リダイレクトエントリを返す
  return NextResponse.json(redirect)
}

知っておくと便利:

  • ブルームフィルターを生成するには、bloom-filters のようなライブラリを使用できます
  • 悪意のあるリクエストを防ぐために、ルートハンドラーへのリクエストを検証する必要があります