リダイレクト

Next.jsでリダイレクトを処理する方法はいくつかあります。このページでは、利用可能な各オプション、使用例、および大量のリダイレクトを管理する方法について説明します。

API	目的	使用場所	ステータスコード
`redirect`	ミューテーションまたはイベント後にユーザーをリダイレクトする	Server Components, Server Actions, Route Handlers	307 (一時的) または 303 (Server Action)
`permanentRedirect`	ミューテーションまたはイベント後にユーザーをリダイレクトする	Server Components, Server Actions, Route Handlers	308 (完全)
`useRouter`	クライアントサイドのナビゲーションを実行する	Client Componentsのイベントハンドラー	N/A
`redirects` in `next.config.js`	パスに基づいて着信リクエストをリダイレクトする	`next.config.js` ファイル	307 (一時的) または 308 (完全)
`NextResponse.redirect`	条件に基づいて着信リクエストをリダイレクトする	Middleware	任意

`redirect` 関数

redirect 関数を使用すると、ユーザーを別のURLにリダイレクトできます。 Server Components、Route Handlers、およびServer Actionsで redirect を呼び出せます。

redirect は、ミューテーションまたはイベントの後によく使用されます。たとえば、投稿を作成する場合:

TypeScript
JavaScript

app/actions.tsx
'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}`) // 新しい投稿ページに移動
}

app/actions.js
'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}`) // 新しい投稿ページに移動
}

Good to know:

redirectはデフォルトで307（一時的なリダイレクト）ステータスコードを返します。Server Actionで使用されると、POSTリクエストの結果として成功ページにリダイレクトするために一般的に使用される303（See Other）を返します。

redirectは内部的にエラーをスローするため、try/catchブロックの外で呼び出す必要があります。

redirectはClient Componentのレンダリングプロセス中に呼び出すことができますが、イベントハンドラでは呼び出せません。代わりにuseRouter hookを使用できます。

redirectは絶対URLも受け入れ、外部リンクへのリダイレクトに使用できます。

レンダープロセスの前にリダイレクトしたい場合は、next.config.jsまたはMiddlewareを使用してください。

redirect APIリファレンスで詳細を確認してください。

`permanentRedirect` 関数

permanentRedirect 関数を使用すると、ユーザーを永久に別のURLにリダイレクトできます。 Server Components、Route Handlers、およびServer Actionsで permanentRedirect を呼び出せます。

permanentRedirect は、エンティティの canonical URLを変更するミューテーションまたはイベントの後によく使用されます。たとえば、ユーザーがユーザー名を変更した後にプロフィールURLを更新する場合:

TypeScript
JavaScript

app/actions.ts
'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}`) // 新しいユーザープロフィールに移動
}

app/actions.js
'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}`) // 新しいユーザープロフィールに移動
}

Good to know:

permanentRedirectはデフォルトで308（完全なリダイレクト）ステータスコードを返します。

permanentRedirectは絶対URLも受け入れ、外部リンクへのリダイレクトに使用できます。

レンダープロセスの前にリダイレクトしたい場合は、next.config.jsまたはMiddlewareを使用してください。

permanentRedirect APIリファレンスで詳細を確認してください。

`useRouter()` フック

Client Componentのイベントハンドラ内でリダイレクトが必要な場合は、useRouter フックから push メソッドを使用できます。たとえば:

TypeScript
JavaScript

app/page.tsx
'use client'

import { useRouter } from 'next/navigation'

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

  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}

app/page.js
'use client'

import { useRouter } from 'next/navigation'

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

  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}

Good to know:

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

useRouter APIリファレンスで詳細を確認してください。

`next.config.js` 内の `redirects`

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リファレンスで詳細を確認してください。

Good to know:

redirectsは、permanentオプションで307（一時的なリダイレクト）または308（完全なリダイレクト）ステータスコードを返すことができます。

redirectsにはプラットフォームの制限がある場合があります。たとえば、Vercelでは、1,024のリダイレクト制限があります。大量のリダイレクト（1000以上）を管理するには、Middlewareを使用してカスタムソリューションを作成することを検討してください。大規模なリダイレクトの管理についてはmanaging redirects at scaleを参照してください。

redirectsは、Middlewareの前に実行されます。

Middleware内の `NextResponse.redirect`

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

たとえば、ユーザーが認証されていない場合は、/loginページにリダイレクトします:

TypeScript
JavaScript

middleware.ts
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*',
}

middleware.js
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*',
}

Good to know:

Middlewareは、next.config.jsのredirectsの後、レンダリングの前に実行されます。

Middlewareのドキュメントで詳細を確認してください。

大量のリダイレクトの管理（高度）

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

これを行うには、次の点を考慮する必要があります：

リダイレクトマップを作成して保存する。
データ検索パフォーマンスを最適化する。

Next.jsの例: 以下の推奨事項の実装例として、Middleware with Bloom filterがあります。

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

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

次のようなデータ構造を検討してください：

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

Middlewareでは、VercelのEdge Config またはRedis などのデータベースから読み取り、着信リクエストに基づいてユーザーをリダイレクトできます:

TypeScript
JavaScript

middleware.ts
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()
}

middleware.js
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 ConfigやRedisなど）を使用する。
大きなリダイレクトファイルまたはデータベースを読み取る前に、リダイレクトが存在するかどうかを効率的にチェックするためのデータ検索戦略（Bloomフィルターなど）を使用する。

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

存在する場合は、着信リクエストをRoute Handlerに転送し、実際のファイルを確認し、ユーザーを適切なURLにリダイレクトします。これにより、Middlewareに大きなリダイレクトファイルをインポートすることで、着信リクエストが遅くなるのを防げます。

TypeScript
JavaScript

middleware.ts
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)) {
    // パス名をRoute Handlerに転送
    const api = new URL(
      `/api/redirects?pathname=${encodeURIComponent(request.nextUrl.pathname)}`,
      request.nextUrl.origin
    )

    try {
      // Route Handlerからリダイレクトデータをフェッチ
      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()
}

middleware.js
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)) {
    // パス名をRoute Handlerに転送
    const api = new URL(
      `/api/redirects?pathname=${encodeURIComponent(request.nextUrl.pathname)}`,
      request.nextUrl.origin
    )

    try {
      // Route Handlerからリダイレクトデータをフェッチ
      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()
}

その後、Route Handlerで:

TypeScript
JavaScript

app/redirects/route.ts
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)
}

app/redirects/route.js
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)
}

Good to know:

ブルームフィルターを生成するには、bloom-filtersのようなライブラリを使用できます。

Route Handlerへのリクエストを検証して、悪意のあるリクエストを防止する必要があります。

redirect 関数​

permanentRedirect 関数​

useRouter() フック​

next.config.js 内の redirects​

Middleware内の NextResponse.redirect​

大量のリダイレクトの管理（高度）​

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

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