middleware.js

middleware.js または middleware.ts ファイルは、リクエストが完了する前にサーバー上でコードを実行するためのミドルウェアを記述するために使用されます。入ってくるリクエストに基づいて、書き換え、リダイレクト、リクエストまたはレスポンスヘッダーの変更、または直接応答によってレスポンスを変更できます。

ミドルウェアはルートがレンダリングされる前に実行されます。これは、認証、ロギング、リダイレクト処理などのカスタムサーバーサイドロジックを実装するのに特に役立ちます。

プロジェクトのルートにある middleware.ts (または .js) ファイルを使用してミドルウェアを定義します。例えば、app や pages と同じ階層、または該当する場合は src 内に配置します。

import { NextResponse, NextRequest } from 'next/server'
 
// This function can be marked `async` if using `await` inside
export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url))
}
 
export const config = {
  matcher: '/about/:path*',
}

エクスポート

ミドルウェア関数

このファイルは、デフォルトエクスポートとして、または middleware という名前で、単一の関数をエクスポートする必要があります。同じファイルからの複数のミドルウェアはサポートされていないことに注意してください。

// Example of default export
export default function middleware(request) {
  // Middleware logic
}

設定オブジェクト (オプション)

オプションで、ミドルウェア関数と並行して設定オブジェクトをエクスポートできます。このオブジェクトには、ミドルウェアが適用されるパスを指定するためのマッチャーが含まれています。

マッチャー

matcher オプションを使用すると、ミドルウェアを実行する特定のパスをターゲットにできます。これらのパスはいくつかの方法で指定できます。

• 単一のパスの場合: `'/about'` のように文字列を直接使用してパスを定義します。
• 複数のパスの場合: `matcher: ['/about', '/contact']` のように配列を使用して複数のパスをリストします。これにより、ミドルウェアは `'/about'` と `'/contact'` の両方に適用されます。

さらに、matcher は `matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)']` のような正規表現を介した複雑なパス指定をサポートしており、どのパスを含めるか、または除外するかを正確に制御できます。

matcher オプションは、以下のキーを持つオブジェクトの配列も受け入れます。

• source: リクエストパスを照合するために使用されるパスまたはパターンです。直接パス照合用の文字列、またはより複雑な照合用のパターンにすることができます。
• regexp (オプション): ソースに基づいて照合を微調整する正規表現文字列です。どのパスを含めるか、または除外するかをさらに制御できます。
• locale (オプション): `false` に設定すると、パス照合でロケールベースのルーティングを無視するブール値です。
• has (オプション): ヘッダー、クエリパラメータ、クッキーなどの特定のリクエスト要素の存在に基づく条件を指定します。
• missing (オプション): ヘッダーやクッキーの欠落など、特定のリクエスト要素が存在しない条件に焦点を当てます。

export const config = {
  matcher: [
    {
      source: '/api/*',
      regexp: '^/api/(.*)',
      locale: false,
      has: [
        { type: 'header', key: 'Authorization', value: 'Bearer Token' },
        { type: 'query', key: 'userId', value: '123' },
      ],
      missing: [{ type: 'cookie', key: 'session', value: 'active' }],
    },
  ],
}

パラメータ

request

ミドルウェアを定義する際、デフォルトのエクスポート関数は単一のパラメータ `request` を受け入れます。このパラメータは、入ってくるHTTPリクエストを表す NextRequest のインスタンスです。

import type { NextRequest } from 'next/server'
 
export function middleware(request: NextRequest) {
  // Middleware logic goes here
}

ご存じでしたか:

• NextRequest は Next.js ミドルウェアにおける入ってくるHTTPリクエストを表す型であり、NextResponse はHTTPレスポンスを操作して返すために使用されるクラスです。

NextResponse

ミドルウェアは、Web Response APIを拡張したNextResponseオブジェクトを使用できます。NextResponse オブジェクトを返すことで、クッキーの操作、ヘッダーの設定、リダイレクトの実装、パスの書き換えを直接行うことができます。

知っておくと便利: リダイレクトの場合、NextResponse.redirect の代わりに Response.redirect を使用することもできます。

ランタイム

ミドルウェアはEdgeランタイムのみをサポートしています。Node.jsランタイムは使用できません。

バージョン履歴