リダイレクト
Next.jsでリダイレクトを処理するにはいくつかの方法があります。このページでは、利用可能なオプション、ユースケース、および大量のリダイレクトを管理する方法について説明します。
API | 目的 | 使用場所 | ステータスコード |
---|---|---|---|
useRouter | クライアントサイドのナビゲーションを実行 | Components | 該当なし |
redirects in next.config.js | パスに基づいて受信リクエストをリダイレクト | next.config.js ファイル | 307 (一時的) または 308 (恒久的) |
NextResponse.redirect | 条件に基づいて受信リクエストをリダイレクト | Middleware | 任意 |
useRouter()
フック
コンポーネント内でリダイレクトする必要がある場合は、useRouter
フックのpush
メソッドを使用できます。例:
import { useRouter } from 'next/router'
export default function Page() {
const router = useRouter()
return (
<button type="button" onClick={() => router.push('/dashboard')}>
Dashboard
</button>
)
}
補足:
- プログラムでユーザーをナビゲートする必要がない場合は、
<Link>
コンポーネントを使用するべきです。
詳細についてはuseRouter
APIリファレンスを参照してください。
next.config.js
のredirects
next.config.js
ファイルのredirects
オプションを使用すると、受信リクエストのパスを別の宛先パスにリダイレクトできます。これは、ページのURL構造を変更する場合や、事前に分かっているリダイレクトのリストがある場合に便利です。
redirects
はパス、ヘッダー、Cookie、クエリマッチングをサポートしており、受信リクエストに基づいてユーザーをリダイレクトする柔軟性を提供します。
redirects
を使用するには、next.config.js
ファイルにオプションを追加します:
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
async redirects() {
return [
// 基本的なリダイレクト
{
source: '/about',
destination: '/',
permanent: true,
},
// ワイルドカードパスマッチング
{
source: '/blog/:slug',
destination: '/news/:slug',
permanent: true,
},
]
},
}
export default nextConfig
詳細についてはredirects
APIリファレンスを参照してください。
補足:
redirects
はpermanent
オプションで307(一時的リダイレクト)または308(恒久的リダイレクト)ステータスコードを返すことができます。redirects
はプラットフォームによって制限がある場合があります。例えば、Vercelでは1,024個のリダイレクトに制限があります。大量のリダイレクト(1000以上)を管理するには、Middlewareを使用してカスタムソリューションを作成することを検討してください。詳細は大規模なリダイレクトの管理を参照してください。redirects
はMiddlewareの前に実行されます。
MiddlewareのNextResponse.redirect
Middlewareを使用すると、リクエストが完了する前にコードを実行できます。その後、受信リクエストに基づいて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*',
}
補足:
- Middlewareは
next.config.js
のredirects
の後、レンダリングの前に実行されます。
詳細についてはMiddlewareのドキュメントを参照してください。
大規模なリダイレクトの管理(高度)
大量のリダイレクト(1000以上)を管理するには、Middlewareを使用してカスタムソリューションを作成することを検討してください。これにより、アプリケーションを再デプロイすることなくプログラムでリダイレクトを処理できます。
そのためには、以下を検討する必要があります:
- リダイレクトマップの作成と保存
- データ検索パフォーマンスの最適化
Next.jsの例: 以下の推奨事項の実装例については、Bloom filterを使用したMiddlewareの例を参照してください。
1. リダイレクトマップの作成と保存
リダイレクトマップは、データベース(通常はキーバリューストア)またはJSONファイルに保存できるリダイレクトのリストです。
以下のデータ構造を考えてみましょう:
{
"/old": {
"destination": "/new",
"permanent": true
},
"/blog/post-old": {
"destination": "/blog/post-new",
"permanent": true
}
}
Middlewareでは、VercelのEdge ConfigやRedisなどのデータベースから読み取り、受信リクエストに基づいてユーザーをリダイレクトできます:
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()
}
2. データ検索パフォーマンスの最適化
すべての受信リクエストに対して大きなデータセットを読み取ることは遅くてコストがかかる可能性があります。データ検索パフォーマンスを最適化するには2つの方法があります:
- Vercel Edge ConfigやRedisなど、高速な読み取りに最適化されたデータベースを使用する。
- より大きなリダイレクトファイルやデータベースを読み取る前に、リダイレクトが存在するかどうかを効率的にチェックするためにBloom filterなどのデータ検索戦略を使用する。
前の例を考慮して、生成されたBloom filterファイルをMiddlewareにインポートし、受信リクエストのパス名がBloom filterに存在するかどうかをチェックできます。
存在する場合は、リクエストをAPI Routesに転送し、実際のファイルをチェックしてユーザーを適切なURLにリダイレクトします。これにより、大きなリダイレクトファイルをMiddlewareにインポートすることを回避でき、すべての受信リクエストが遅くなるのを防ぎます。
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 filterを初期化
const bloomFilter = ScalableBloomFilter.fromJSON(GeneratedBloomFilter as any)
export async function middleware(request: NextRequest) {
// 受信リクエストのパスを取得
const pathname = request.nextUrl.pathname
// パスがBloom filterに存在するかチェック
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()
}
そして、API Routeでは:
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]
// Bloom filterの偽陽性に対応
if (!redirect) {
return res.status(400).json({ message: 'No redirect' })
}
// リダイレクトエントリを返す
return res.json(redirect)
}
補足:
- Bloom filterを生成するには、
bloom-filters
などのライブラリを使用できます。- 悪意のあるリクエストを防ぐために、Route Handlerに対するリクエストを検証する必要があります。