リダイレクト

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 を呼び出すことができます。

redirect は、通常、変更やイベント後に使用されます。例えば、投稿を作成する場合：

app/actions.tsx

TypeScript

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

補足:

redirect はデフォルトで307（一時的リダイレクト）のステータスコードを返します。サーバーアクション内で使用される場合、303（その他を参照）を返します。これは、POSTリクエストの結果として成功ページにリダイレクトする際によく使用されます。

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

redirect はクライアントコンポーネントのレンダリングプロセス中に呼び出すことができますが、イベントハンドラーでは呼び出せません。代わりに useRouter フックを使用できます。

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

レンダリングプロセスの前にリダイレクトする場合は、next.config.js またはミドルウェアを使用してください。

詳細については、redirect APIリファレンスを参照してください。

`permanentRedirect` 関数

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

permanentRedirect は、通常、エンティティの標準URLを変更する変更やイベント後に使用されます。例えば、ユーザーがユーザー名を変更した後のプロファイルURLの更新：

app/actions.ts

TypeScript

'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}`) // 新しいユーザープロファイルに移動
}

補足:

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

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

レンダリングプロセスの前にリダイレクトする場合は、next.config.js またはミドルウェアを使用してください。

詳細については、permanentRedirect APIリファレンスを参照してください。

`useRouter()` フック

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

app/page.tsx

TypeScript

'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.js` の `redirects`

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

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

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 リファレンスを参照してください。

補足:

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

redirects はプラットフォームによって制限される場合があります。例えば、Vercelでは 1,024 個のリダイレクトに制限されています。1000以上のリダイレクトを管理するには、ミドルウェアを使用したカスタムソリューションの作成を検討してください。大規模なリダイレクトの管理を参照してください。

redirects はミドルウェアの前に実行されます。

ミドルウェアでの `NextResponse.redirect`

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

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

middleware.ts

TypeScript

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

補足:

ミドルウェアは next.config.js の redirects の後、レンダリングの前に実行されます。

詳細については、ミドルウェアのドキュメントを参照してください。

大規模なリダイレクトの管理（上級者向け）

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

そのためには、以下を考慮する必要があります：

リダイレクトマップの作成と保存。
データルックアップのパフォーマンス最適化。

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

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

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

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

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

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

middleware.ts

TypeScript

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 フィルターのようなデータルックアップ戦略を使用して、大きなリダイレクトファイルやデータベースを読み取る前に、リダイレクトが存在するかを効率的にチェックする。

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

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

middleware.ts

TypeScript

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ファイルから Bloom フィルターを初期化
const bloomFilter = ScalableBloomFilter.fromJSON(GeneratedBloomFilter as any)
 
export async function middleware(request: NextRequest) {
  // 受信リクエストのパスを取得
  const pathname = request.nextUrl.pathname
 
  // パスが Bloom フィルターに存在するかをチェック
  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()
}

middleware.js

import { NextResponse } from 'next/server'
import { ScalableBloomFilter } from 'bloom-filters'
import GeneratedBloomFilter from './redirects/bloom-filter.json'
 
// 生成されたJSONファイルから Bloom フィルターを初期化
const bloomFilter = ScalableBloomFilter.fromJSON(GeneratedBloomFilter)
 
export async function middleware(request) {
  // 受信リクエストのパスを取得
  const pathname = request.nextUrl.pathname
 
  // パスが Bloom フィルターに存在するかをチェック
  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()
}

次に、Route Handlerでは：

app/redirects/route.ts

TypeScript

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)
}

補足:

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

悪意のあるリクエストを防ぐために、Route Handlerへのリクエストを検証する必要があります。

リダイレクト

下一步

ミドルウェア

permanentRedirect

redirect

リダイレクト