コンテンツにスキップ

プロキシ

プロキシ

プロキシを使用すると、リクエストが完了する前にコードを実行できます。その後、受信リクエストに基づいて、レスポンスの書き換え、リダイレクト、リクエストまたはレスポンスヘッダーの変更、または直接レスポンスを返すことで、レスポンスを変更できます。

ユースケース

プロキシが効果的な一般的なシナリオには、次のようなものがあります。

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

プロキシが適さない場合

  • 低速なデータ取得
  • セッション管理

options.cacheoptions.next.revalidate、またはoptions.next.tagsを指定したfetchの使用は、プロキシでは効果がありません。

規約

プロジェクトのルート、または該当する場合はsrc内にproxy.ts(または.js)ファイルを作成します。これにより、pagesまたはappと同じレベルに配置されます。

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

proxy.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
// This function can be marked `async` if using `await` inside
export function proxy(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url))
}
 
// See "Matching Paths" below to learn more
export const config = {
  matcher: '/about/:path*',
}

proxyの使用方法についてはこちらをお読みください。または、proxyAPIリファレンスを参照してください。