Redirecting
あおけんNext.jsでリダイレクトを処理する方法はいくつかある。
このページでは、利用可能なoption、ユースケース、大量のリダイレクトを管理する方法について説明。
| API | Purpose | Where | Status Code |
|---|---|---|---|
| useRouter | クライアント側ナビゲーションの実行 | Components | N/A |
| redirects in next.config.js | パスに基づいて受信リクエストをリダイレクトする | next.config.js file | 307(Temporary) or 308 (Permanent) |
| NextResponse.redirect | 条件に基づいて受信リクエストをリダイレクトする | Middleware | Any |
あおけんuseRouter() hook
コンポーネント内部でリダイレクトが必要な場合は、
useRouterフックのpushメソッドを使う。
// app/page.tsx
import { useRouter } from 'next/router'
export default function Page() {
const router = useRouter()
return (
<button type="button" onClick={() => router.push('/dashboard')}>
Dashboard
</button>
)
}
プログラムでユーザーをナビゲートする必要がない場合は、<Link>コンポーネントを使うべき。
あおけんredirects in next.config.js
next.config.jsファイルのredirectsオプションを使うと、
リクエストのパスを別の宛先パスにリダイレクトすることができます。
これは、ページのURL構造を変更するときや、
リダイレクト先のリストがあらかじめわかっているときに便利です。
redirects はpath、header、cookie、queryのマッチングをサポートしており、
入ってきたリクエストに基づいてユーザーをリダイレクトさせる柔軟性を提供します。
リダイレクトを使用するには、next.config.jsファイルにoptionを追加。
// next.config.js
module.exports = {
async redirects() {
return [
// Basic redirect
{
source: '/about',
destination: '/',
permanent: true,
},
// Wildcard path matching
{
source: '/blog/:slug',
destination: '/news/:slug',
permanent: true,
},
]
},
}
- リダイレクトは、permanent オプションで 307 (Temporary Redirect) または 308 (Permanent Redirect) ステータスコードを返すことができる
- リダイレクトはプラットフォームによって制限がある
- 例えば、Vercelの場合、リダイレクト数は1,024個に制限されている
- 大量のリダイレクト（1000以上）を管理するには、ミドルウェアを使ったカスタムソリューションの作成を検討
- managing redirects at scale
- リダイレクトはミドルウェアの前に実行される
あおけんNextResponse.redirect in Middleware
ミドルウェアを使うと、リクエストが完了する前にコードを実行することができる。
そして、送られてきたリクエストに基づいて、
NextResponse.redirectを使って別のURLにリダイレクトする。
これは、条件（認証、セッション管理など）に基づいてユーザーをリダイレクトしたい場合や、
リダイレクトの数が多い場合に便利。
例えば、ユーザーが認証されていない場合、/loginページにリダイレクトさせる
//middleware.ts
import { NextResponse, NextRequest } from 'next/server'
import { authenticate } from 'auth-provider'
export function middleware(request: NextRequest) {
const isAuthenticated = authenticate(request)
// If the user is authenticated, continue as normal
if (isAuthenticated) {
return NextResponse.next()
}
// Redirect to login page if not authenticated
return NextResponse.redirect(new URL('/login', request.url))
}
export const config = {
matcher: '/dashboard/:path*',
}
ミドルウェアは、next.config.jsのリダイレクトの後、レンダリングの前に実行。
あおけんManaging redirects at scale (advanced)
大量のリダイレクト（1000件以上）を管理するには、
ミドルウェアを使用したカスタムソリューションを作成することを検討する。
これにより、アプリケーションを再デプロイすることなく、
プログラムでリダイレクトを処理することができる。
そのためには、次のことを考慮する
- リダイレクトマップの作成と保存
- データ検索パフォーマンスの最適化
Creating and storing a redirect map
リダイレクトマップは、
データベース（通常はキーバリューストア）やJSONファイルに保存できるリダイレクトのリスト。
次のようなデータ構造を考える
{
"/old": {
"destination": "/new",
"permanent": true
},
"/blog/post-old": {
"destination": "/blog/post-new",
"permanent": true
}
}
ミドルウェアでは、
Vercel's 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)
}
// No redirect found, continue without redirecting
return NextResponse.next()
}
Optimizing data lookup performance
リクエストが来るたびに大きなデータセットを読み込むのは時間もコストもかかる。
データ検索のパフォーマンスを最適化する方法は2つ。
- Vercel Edge ConfigやRedisなど、高速読み取りに最適化されたデータベースを使用する
- ブルーム・フィルターのようなデータ・ルックアップ・ストラテジーを使って、大きなリダイレクト・ファイルやデータベースを読み込む前に、リダイレクトが存在するかどうかを効率的にチェックする
先ほどの例を考慮すると、
生成されたブルームフィルターファイルをミドルウェアにインポートし、
受信リクエストのパス名がブルームフィルターに存在するかどうかをチェックすることができる。
もしそうであれば、実際のファイルをチェックし、
ユーザーを適切なURLにリダイレクトするAPI Routesにリクエストを転送する。
これにより、大きなリダイレクトファイルをミドルウェアにインポートする必要がなくなり、
受信リクエストの処理速度が遅くなることがなくなる。
// 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
}
// Initialize bloom filter from a generated JSON file
const bloomFilter = ScalableBloomFilter.fromJSON(GeneratedBloomFilter as any)
export async function middleware(request: NextRequest) {
// Get the path for the incoming request
const pathname = request.nextUrl.pathname
// Check if the path is in the bloom filter
if (bloomFilter.has(pathname)) {
// Forward the pathname to the Route Handler
const api = new URL(
`/api/redirects?pathname=${encodeURIComponent(request.nextUrl.pathname)}`,
request.nextUrl.origin
)
try {
// Fetch redirect data from the Route Handler
const redirectData = await fetch(api)
if (redirectData.ok) {
const redirectEntry: RedirectEntry | undefined =
await redirectData.json()
if (redirectEntry) {
// Determine the status code
const statusCode = redirectEntry.permanent ? 308 : 307
// Redirect to the destination
return NextResponse.redirect(redirectEntry.destination, statusCode)
}
}
} catch (error) {
console.error(error)
}
}
// No redirect found, continue the request without redirecting
return NextResponse.next()
}
次に、APIルートで
// pages/api/redirects.ts
import { 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' })
}
// Get the redirect entry from the redirects.json file
const redirect = (redirects as Record<string, RedirectEntry>)[pathname]
// Account for bloom filter false positives
if (!redirect) {
return res.status(400).json({ message: 'No redirect' })
}
// Return the redirect entry
return res.json(redirect)
}
- ブルームフィルターを生成するには、bloom-filtersのようなライブラリーを使うことができる。
- 悪意のあるリクエストを防ぐために、Route Handlerへのリクエストを検証する必要がある。