Proxy

Proxy

Proxyはリクエスト完了前にコードを実行することができます。その後、受信したリクエストに基づいて、書き換え、リダイレクト、リクエストやレスポンスヘッダーの修正、または直接レスポンスすることにより、レスポンスを変更できます。

ユースケース

Proxyが効果的な一般的なシナリオには以下のようなものがあります：

• 受信したリクエストの一部を読み取った後の迅速なリダイレクト
• A/Bテストまたは実験に基づいて異なるページへの書き換え
• すべてのページまたはページのサブセットのヘッダーの修正

Proxyは以下には適していません：

• 低速なデータフェッチ
• セッション管理

Proxyでは、options.cache、options.next.revalidate、またはoptions.next.tagsでのfetchの使用は効果がありません。

規則

プロジェクトルートまたは該当する場合はsrc内にproxy.ts（または.js）ファイルを作成して、pagesまたはappと同じレベルに配置します。

注意：プロジェクトごとにproxy.tsファイルは1つだけサポートされていますが、プロキシロジックを複数のモジュールに分けることはできます。プロキシ機能を別の.tsまたは.jsファイルに分割し、メインのproxy.tsファイルにインポートします。これにより、ルート固有のプロキシをより整理しやすく管理でき、proxy.tsに集約して一元的に制御できます。単一のプロキシファイルを強制することで、設定が簡潔になり、潜在的な競合を防ぎ、複数のプロキシレイヤーを回避することでパフォーマンスが最適化されます。

例

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
// このfunction内で`await`を使用する場合は、`async`でマークできます
export function proxy(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url))
}
 
// 詳細については下の「パスのマッチング」を参照してください
export const config = {
  matcher: '/about/:path*',
}

proxyの使用についてさらに読むか、proxyのAPIリファレンスを参照してください。