Next.js のミドルウェアとは何ですか-jsチュートリアル-php.cn

What is middleware in Next.js

Next.js ミドルウェアは、アプリケーション内でのリクエスト処理のための強力なカスタマイズを提供します。これにより、セッション検証、ロギング、キャッシュなどのアクションを実行するリクエストを傍受できます。ただし、ミドルウェアの実装が非効率であると、パフォーマンスに重大な影響を与える可能性があります。このガイドでは、ミドルウェアの機能とベストプラクティスを明確にし、いつ、どのように効果的に活用するかを理解するのに役立ちます。

Next.js ミドルウェアとは何ですか?

Next.js ミドルウェアは、受信リクエストごとに自動的に実行される関数で構成されます。これらの関数は、リクエストデータがアプリケーションのルーティングシステムに到達する前に、リクエストデータを検査して変更します。アプリケーションには、認証、ロギング、エラー管理が含まれます。たとえば、ミドルウェアはトークンをチェックすることでユーザーセッションを検証し、不正アクセスを防止できます。

Next.js ミドルウェアは柔軟性が高く、カスタマイズ可能です。特定のアプリケーションのニーズを満たすようにカスタマイズされた関数を作成し、アプリケーション全体の設定やポリシーを設定できます。これにより、ルーティング設定が簡素化され、複雑な多層セットアップが回避されます。ミドルウェアを使用すると、アプリケーションがより堅牢でスケーラブルで保守しやすくなります。

Next.js ミドルウェアの処理順序

リクエストを受信したときの操作の順序を理解することが重要です:

ヘッダー: next.config.js ヘッダーが最初に適用され、初期リクエストヘッダーが設定されます。これは、Content Security Policy (CSP) や CORS などのセキュリティヘッダーに最適です。
リダイレクト: next.config.js リダイレクトは次に処理され、リクエストを別の URL にマッピングします。これは URL の書き換えとリダイレクトを処理し、ページまたはアプリケーション全体にわたるルーティングルールを管理します。
ミドルウェアの評価: ヘッダーとリダイレクトの後、ミドルウェアが評価され、そのロジックが実行されます。
beforeFiles: next.config.js beforeFiles (書き換え) が適用され、ルーティング前にさらに書き換えたりファイル固有のロジックを有効にしたりできます。
ファイルシステムルート: アプリケーションのファイルシステムルートが処理されます (public/、_next/static/、ページ、アプリなど)。静的ファイルはここで提供されます。
afterFiles: next.config.js afterFiles (書き換え) が適用され、動的ルーティングの前に最終変更ポイントが提供されます。
動的ルート: 動的ルート (例: /blog/[slug]) が処理されます。これらには、変数またはパラメータに対する特別な処理と書き換えが必要です。
フォールバック: next.config.js フォールバックが適用され、他の方法ではルーティングできないリクエストを管理します。これにより、エラーハンドラーまたはフォールバックルートが可能になります。

Next.js ミドルウェアの一般的な使用例

認証: 保護されたリソースにアクセスする前にユーザーの資格情報を検証します。ミドルウェアはセッショントークンをチェックし、認証されていないユーザーをログインにリダイレクトできます。 Clerk はこのアプローチを効果的に使用しています。
ロギング: 分析とデバッグのために各リクエストを中央サーバーに記録することにより、アプリケーションイベント (ユーザーアクション、エラー) を追跡します。
データの取得: (制限あり) API またはデータベースからデータをロードして最新の情報を取得します。後で説明するパフォーマンスに関する考慮事項に注意してください。
リクエストルーティング: ルーティングをカスタマイズし、リクエストを特定のパスにリダイレクトするか、キャッチオールエラーハンドラーを実装します。
キャッシュ: 頻繁にアクセスされるリソースをメモリに保存し、リクエストを減らすことでパフォーマンスを向上させます。 (コード例は原文で提供されています)
レート制限: ユーザーまたは IP アドレスからのリクエストを監視し、過剰なリクエストをブロックしてバックエンドリソースを保護します。
ページ変換: HTML を書き換えるか、リアルタイムでデータを変換します。これは、画像の URL を書き換えたり、異なるドメインからアセットを提供したりする場合に役立ちます。
分析/レポート: ユーザーの行動とアプリケーションのパフォーマンスを追跡して最適化します。ミドルウェアはサードパーティの分析統合のために Cookie を変更できます。
国際化: ユーザーのロケールに基づいてコンテンツを複数の言語で配信します (IP アドレスまたは HTTP ヘッダーを使用するなど)。

Next.js プロジェクトでのミドルウェアの使用

ミドルウェアは、プロジェクトのルートに middleware.ts ファイルを作成することで実装されます。このファイルは、ミドルウェア関数と (オプションで) マッチャーを定義します。

ミドルウェア機能

ミドルウェア関数にはミドルウェアロジックが含まれています。 request を入力として受け取り、response を返します。

<code class="language-javascript">import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // Middleware logic here
  return NextResponse.next()
}</code>

ログイン後にコピー

/dashboard で始まらない限り、リクエストを /api にリダイレクトする例:

<code class="language-javascript">export function middleware(request: NextRequest) {
  if (!request.nextUrl.pathname.startsWith('/api')) {
    return NextResponse.redirect(new URL('/dashboard', request.url))
  }
  return NextResponse.next()
}</code>

ログイン後にコピー

関数は次を返す必要があります: NextResponse.next()、NextResponse.redirect()、NextResponse.rewrite()、NextResponse.json()、またはカスタム Response/NextResponse。

マッチャー

マッチャーは、どのリクエストがミドルウェアによって処理されるかを決定します。これは config オブジェクトで定義されています:

<code class="language-javascript">export const config = {
  matcher: '/hello', // Matches only /hello
}</code>

ログイン後にコピー

複数のルートに配列を使用したり、より複雑なマッチングのために正規表現を使用したりできます:

<code class="language-javascript">import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // Middleware logic here
  return NextResponse.next()
}</code>

ログイン後にコピー

マッチャーがないと、ミドルウェアはすべてのルートに適用され、パフォーマンスに影響を与える可能性があります。

複数のミドルウェア機能を組み合わせる

Next.js は 1 つのミドルウェアファイルのみをサポートします。複数の関数を使用するには、個別の関数を作成してそれらを順番に呼び出し、関数が生成された場合は応答を返します。

<code class="language-javascript">export function middleware(request: NextRequest) {
  if (!request.nextUrl.pathname.startsWith('/api')) {
    return NextResponse.redirect(new URL('/dashboard', request.url))
  }
  return NextResponse.next()
}</code>

ログイン後にコピー

Clerk と Next.js ミドルウェア

Clerk は、clerkMiddleware:

を提供することで認証を簡素化します。

<code class="language-javascript">export const config = {
  matcher: '/hello', // Matches only /hello
}</code>

ログイン後にコピー

これは Cookie の解析とユーザーの検証を処理します。カスタムロジックを使用して拡張できます:

<code class="language-javascript">export const config = {
  matcher: ['/hello', '/world', '/[a-zA-Z]+/'], // Matches multiple routes and regex
}</code>

ログイン後にコピー

Next.js ミドルウェアの制限事項

エッジランタイムの制約: ミドルウェアはエッジランタイム上で実行され、利用可能な API とライブラリが制限されます。ファイルシステムへのアクセスは許可されていません。
サイズ制限: ミドルウェア機能は 1MB に制限されています。
ES モジュールのみ: ES モジュールのみがサポートされます。
文字列評価なし: eval および new Function(evalString) は許可されません。
パフォーマンスに関する考慮事項: 複雑なミドルウェアはパフォーマンスに悪影響を与える可能性があります。ミドルウェア内のデータベースへのアクセスは、通常は推奨されません。
リクエスト/レスポンスへの制限付きアクセス: ミドルウェアには、リクエストオブジェクトとレスポンスオブジェクトへの完全なアクセス権がありません。