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

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

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

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

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

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

1. ヘッダー: next.config.js ヘッダーが最初に適用され、初期リクエスト ヘッダーが設(shè)定されます。これは、Content Security Policy (CSP) や CORS などのセキュリティ ヘッダーに最適です。

2. リダイレクト: next.config.js リダイレクトは次に処理され、リクエストを別の URL にマッピングします。 これは URL の書き換えとリダイレクトを処理し、ページまたはアプリケーション全體にわたるルーティング ルールを管理します。

3. ミドルウェアの評(píng)価: ヘッダーとリダイレクトの後、ミドルウェアが評(píng)価され、そのロジックが実行されます。

4. beforeFiles: next.config.js beforeFiles (書き換え) が適用され、ルーティング前にさらに書き換えたりファイル固有のロジックを有効にしたりできます。

5. ファイル システム ルート: アプリケーションのファイル システム ルートが処理されます (public/、_next/static/、ページ、アプリなど)。 靜的ファイルはここで提供されます。

6. afterFiles: next.config.js afterFiles (書き換え) が適用され、動(dòng)的ルーティングの前に最終変更ポイントが提供されます。

7. 動(dòng)的ルート: 動(dòng)的ルート (例: /blog/[slug]) が処理されます。 これらには、変數(shù)またはパラメータに対する特別な処理と書き換えが必要です。

8. フォールバック: next.config.js フォールバックが適用され、他の方法ではルーティングできないリクエストを管理します。 これにより、エラー ハンドラーまたはフォールバック ルートが可能になります。

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

• 認(rèn)証: 保護(hù)されたリソースにアクセスする前にユーザーの資格情報(bào)を検証します。 ミドルウェアはセッション トークンをチェックし、認(rèn)証されていないユーザーをログインにリダイレクトできます。 Clerk はこのアプローチを効果的に使用しています。

• ロギング: 分析とデバッグのために各リクエストを中央サーバーに記録することにより、アプリケーション イベント (ユーザー アクション、エラー) を追跡します。

• データの取得: (制限あり) API またはデータベースからデータをロードして最新の情報(bào)を取得します。 後で説明するパフォーマンスに関する考慮事項(xiàng)に注意してください。

• リクエスト ルーティング: ルーティングをカスタマイズし、リクエストを特定のパスにリダイレクトするか、キャッチオール エラー ハンドラーを?qū)g裝します。

• キャッシュ: 頻繁にアクセスされるリソースをメモリに保存し、リクエストを減らすことでパフォーマンスを向上させます。 (コード例は原文で提供されています)

• レート制限: ユーザーまたは IP アドレスからのリクエストを監(jiān)視し、過剰なリクエストをブロックしてバックエンド リソースを保護(hù)します。

• ページ変換: HTML を書き換えるか、リアルタイムでデータを変換します。 これは、畫像の URL を書き換えたり、異なるドメインからアセットを提供したりする場(chǎng)合に役立ちます。

• 分析/レポート: ユーザーの行動(dòng)とアプリケーションのパフォーマンスを追跡して最適化します。 ミドルウェアはサードパーティの分析統(tǒng)合のために Cookie を変更できます。

• 國(guó)際化: ユーザーのロケールに基づいてコンテンツを複數(shù)の言語で配信します (IP アドレスまたは HTTP ヘッダーを使用するなど)。

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

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

ミドルウェア機(jī)能

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

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

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

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

export function middleware(request: NextRequest) {
  if (!request.nextUrl.pathname.startsWith('/api')) {
    return NextResponse.redirect(new URL('/dashboard', request.url))
  }
  return NextResponse.next()
}

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

マッチャー

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

export const config = {
  matcher: '/hello', // Matches only /hello
}

複數(shù)のルートに配列を使用したり、より複雑なマッチングのために正規(guī)表現(xiàn)を使用したりできます:

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

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

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

複數(shù)のミドルウェア機(jī)能を組み合わせる

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

export function middleware(request: NextRequest) {
  if (!request.nextUrl.pathname.startsWith('/api')) {
    return NextResponse.redirect(new URL('/dashboard', request.url))
  }
  return NextResponse.next()
}

Clerk と Next.js ミドルウェア

Clerk は、clerkMiddleware:

export const config = {
  matcher: '/hello', // Matches only /hello
}

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

export const config = {
  matcher: ['/hello', '/world', '/[a-zA-Z]+/'], // Matches multiple routes and regex
}

Next.js ミドルウェアの制限事項(xiàng)

• エッジ ランタイムの制約: ミドルウェアはエッジ ランタイム上で実行され、利用可能な API とライブラリが制限されます。 ファイル システムへのアクセスは許可されていません。

• サイズ制限: ミドルウェア機(jī)能は 1MB に制限されています。

• ES モジュールのみ: ES モジュールのみがサポートされます。

• 文字列評(píng)価なし: eval および new Function(evalString) は許可されません。

• パフォーマンスに関する考慮事項(xiàng): 複雑なミドルウェアはパフォーマンスに悪影響を與える可能性があります。 ミドルウェア內(nèi)のデータベースへのアクセスは、通常は推奨されません。

• リクエスト/レスポンスへの制限付きアクセス: ミドルウェアには、リクエスト オブジェクトとレスポンス オブジェクトへの完全なアクセス権がありません。

結(jié)論

このガイドでは、Next.js ミドルウェア、その機(jī)能、制限事項(xiàng)、ベスト プラクティスについて包括的に理解します。 パフォーマンスのボトルネックを避けるために、効率的なコードを優(yōu)先することを忘れないでください。

以上がNext.js のミドルウェアとは何ですかの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。