middleware.js

middleware.js|tsファイルは、リクエストが完了する前にサーバー上でコードを実行するMiddlewareを作成するために使用されます。受信したリクエストに基づいて、レスポンスを書き換え、リダイレクト、リクエストやレスポンスのヘッダーの変更、または直接レスポンスを返すことができます。

Middlewareはルートがレンダリングされる前に実行されます。認証、ログ記録、リダイレクトの処理など、カスタムのサーバーサイドロジックを実装する際に特に便利です。

プロジェクトのルートにmiddleware.ts（または.js）ファイルを使用してMiddlewareを定義します。例えば、appまたはpagesと同じレベル、または適用可能な場合はsrcの内部に配置します。

import { NextResponse, NextRequest } from 'next/server'
 
// `await`を内部で使用する場合、この関数を`async`とマークできます
export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url))
}
 
export const config = {
  matcher: '/about/:path*',
}

import { NextResponse } from 'next/server'
 
// `await`を内部で使用する場合、この関数を`async`とマークできます
export function middleware(request) {
  return NextResponse.redirect(new URL('/home', request.url))
}
 
export const config = {
  matcher: '/about/:path*',
}

エクスポート

Middleware関数

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

// デフォルトエクスポートの例
export default function middleware(request) {
  // Middlewareのロジック
}

Configオブジェクト（オプション）

オプションとして、Middleware関数とともにconfigオブジェクトをエクスポートできます。このオブジェクトには、Middlewareを適用するパスを指定するmatcherが含まれます。

Matcher

matcherオプションを使用すると、Middlewareを実行する特定のパスをターゲットにできます。これらのパスは次のようにいくつかの方法で指定できます：

• 単一のパスの場合：文字列を直接使用してパスを定義します（例：'/about'）。
• 複数のパスの場合：配列を使用して複数のパスをリストします（例：matcher: ['/about', '/contact']）。これにより、/aboutと/contactの両方にMiddlewareが適用されます。

さらに、matcherは正規表現を通じて複雑なパス指定をサポートします（例：matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)']）。これにより、含めるまたは除外するパスを正確に制御できます。

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

• source：リクエストパスと一致するパスまたはパターン。直接のパスマッチングのための文字列、またはより複雑なマッチングのためのパターンを使用できます。
• regexp（オプション）：sourceに基づいてマッチングを微調整する正規表現文字列。含めるまたは除外するパスをさらに詳細に制御できます。
• 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

Middlewareを定義する際、デフォルトエクスポート関数はrequestという単一のパラメーターを受け取ります。このパラメーターは受信するHTTPリクエストを表すNextRequestのインスタンスです。

import type { NextRequest } from 'next/server'
 
export function middleware(request: NextRequest) {
  // Middlewareのロジックをここに記述
}

export function middleware(request) {
  // Middlewareのロジックをここに記述
}

補足：

• NextRequestは、Next.js MiddlewareでのHTTPリクエストを表す型であり、NextResponseはHTTPレスポンスを操作して返すために使用されるクラスです。

NextResponse

Middlewareは、Web Response APIを拡張するNextResponseオブジェクトを使用できます。NextResponseオブジェクトを返すことで、クッキーの直接操作、ヘッダーの設定、リダイレクト、パスの書き換えを実行できます。

補足：リダイレクトの場合、NextResponse.redirectの代わりにResponse.redirectを使用することもできます。

ランタイム

MiddlewareはEdgeランタイムのみをサポートします。Node.jsランタイムは使用できません。

バージョン履歴