Next.js ミドルウェアの概要: 例を使用した仕組み

Nextjs でのルーティングについて話しましょう。今日は、最も強力なミドルウェアの 1 つについて説明します。 Nextjs のミドルウェアは、サーバーからのリクエストをインターセプトし、リクエスト フロー (リダイレクト、URL 書き換え) を制御し、認証、ヘッダー、Cookie の永続化などの機能をグローバルに強化する強力かつ柔軟な方法を提供します。

ミドルウェアの作成

ミドルウェア Next.js アプリケーションを作成しましょう。まず、middleware.js や middleware.ts などのミドルウェア用の新しいファイルを src フォルダーに作成します。 Next.js のミドルウェアは、アクティブになる場所を細かく制御できるようにする必要があります (つまり、カスタム マッチャー構成、または isXXX 関数の使用)

リダイレクト中

例としてリダイレクトを使用して、/profile に移動するとユーザーがホームページにリダイレクトされるシナリオを想像してみましょう。カスタム マッチャー構成アプローチを使用すると、必要な型をインポートし、ミドルウェア関数を定義し、マッチャー構成を指定することでこれを実現できます。

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

export function middleware(request: NextRequest) {
  return NextResponse.redirect(request.url.replace('/profile', '/'));
}

export const config = {
  matcher: '/profile',
};

この例では、ミドルウェア関数はリクエスト URL パスが /profile であるかどうかを確認し、ユーザーをホームページにリダイレクトします。

条件付きステートメントのアプローチでは、コードを次のように変更できます。

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

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname === '/profile') {
    return NextResponse.redirect('/hello');
  }
  return NextResponse.next();
}

この場合、ミドルウェアはリクエスト URL パスをチェックし、パスが /profile の場合はユーザーを /hello ルートにリダイレクトします。

Next.js のミドルウェアは、リダイレクトを処理するだけではありません。また、URL の書き換えも可能で、レガシー URL のサポートや SEO の最適化に役立ちます。前の例でリダイレクトを rewrite に変更すると、ブラウザ内の URL は同じ (/profile) のままですが、応答の内容は /hello ルートからの内容に変わります。

Cookieの使用

最後に、ミドルウェアでの Cookie とヘッダーの使用について見てみましょう。テーマのユーザー設定を処理し、すべての応答にカスタム ヘッダーを追加するようにミドルウェアを変更できます。

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

export function middleware(request: NextRequest) {
  const response = NextResponse.next();

  // Handle user theme preference
  const themePreference = request.cookies.get('theme');
  if (!themePreference) {
    response.cookies.set('theme', 'dark');
  }

  // Add a custom header
  response.headers.set('Custom-Header', 'Custom Value');

  return response;
}

この例では、まずユーザーが Cookie にテーマ設定を保存しているかどうかを確認します。そうでない場合は、Cookie を追加してテーマを「ダーク」に設定します。次に、カスタム ヘッダーを応答に追加します。これは、追加情報を渡したり、デバッグの目的で使用したりするのに役立ちます。

ご覧のとおり、Next.js のミドルウェアは、リクエストとレスポンスのサイクルを効果的に制御してインターセプトし、リダイレクト、URL の書き換え、ヘッダーと Cookie の操作を可能にする強力なツールです。ミドルウェアをマスターすることで、Next.js アプリケーションのルーティング エクスペリエンスを強化し、より堅牢でカスタマイズ可能なユーザー エクスペリエンスを作成できます。

「Next.js のミドルウェアは、アプリケーション内のリクエストとレスポンスのフローを傍受して制御する堅牢な方法を提供する強力な機能です。」 - Next.js ドキュメント

結論

要約すると、Next.js でミドルウェアを定義し、2 つの主要なアプローチ (カスタム マッチャー構成と条件ステートメント) を検討し、ミドルウェアを適用してリダイレクト、URL 書き換え、Cookie とヘッダーの管理を処理する方法を学びました。 。この知識は、ミドルウェアが提供する柔軟性と制御を活用して、Next.js アプリケーションを次のレベルに引き上げるのに役立ちます。

以上がNext.js ミドルウェアの概要: 例を使用した仕組みの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。