リダイレクト

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

API	目的	場所	ステータスコード
`useRouter`	クライアントサイドのナビゲーションを実行	コンポーネント	N/A
`redirects` in `next.config.js`	パスに基づいて受信リクエストをリダイレクト	`next.config.js` ファイル	307（一時的）または 308（永久的）
`NextResponse.redirect`	条件に基づいて受信リクエストをリダイレクト	ミドルウェア	任意

`useRouter()` フック

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

app/page.tsx

TypeScript

import { useRouter } from 'next/router'
 
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 フィルターに存在するかをチェックできます。

存在する場合は、リクエストを API Routes に転送し、実際のファイルをチェックし、ユーザーを適切な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()
}

次に、APIルートでは：

pages/api/redirects.ts

TypeScript

import type { NextApiRequest, NextApiResponse } from 'next'
import redirects from '@/app/redirects/redirects.json'
 
type RedirectEntry = {
  destination: string
  permanent: boolean
}
 
export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const pathname = req.query.pathname
  if (!pathname) {
    return res.status(400).json({ message: 'Bad Request' })
  }
 
  // redirects.jsonファイルからリダイレクトエントリを取得
  const redirect = (redirects as Record<string, RedirectEntry>)[pathname]
 
  // ブルームフィルターの偽陽性に対応
  if (!redirect) {
    return res.status(400).json({ message: 'No redirect' })
  }
 
  // リダイレクトエントリを返す
  return res.json(redirect)
}

pages/api/redirects.js

import redirects from '@/app/redirects/redirects.json'
 
export default function handler(req, res) {
  const pathname = req.query.pathname
  if (!pathname) {
    return res.status(400).json({ message: 'Bad Request' })
  }
 
  // redirects.jsonファイルからリダイレクトエントリを取得
  const redirect = redirects[pathname]
 
  // ブルームフィルターの偽陽性に対応
  if (!redirect) {
    return res.status(400).json({ message: 'No redirect' })
  }
 
  // リダイレクトエントリを返す
  return res.json(redirect)
}

補足:

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

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

リダイレクト

useRouter() フック

next.config.js の redirects

ミドルウェアでの NextResponse.redirect

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

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

2. データルックアップのパフォーマンス最適化

`useRouter()` フック

`next.config.js` の `redirects`

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