middleware.js

middleware.js|ts ファイルは、Middleware を書き、request が完了する前に server 上で code を実行するために使用されます。次に、入ってくる request に基づいて、書き換え、Redirect、request や response headers の修正、または直接の応答によって response を変更することができます。

Middleware は routes がレンダリングされる前に実行されます。特に server-side でのカスタムロジック、例えば認証、ロギング、または redirects の処理などを実装するのに非常に役立ちます。

あなたのプロジェクトの root で、middleware.ts(または .js)ファイルを使用して Middleware を定義します。例えば、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*',
}

import { NextResponse } from 'next/server'

// This function can be marked `async` if using `await` inside
export function middleware(request) {
  return NextResponse.redirect(new URL('/home', request.url))
}

export const config = {
  matcher: '/about/:path*',
}

Exports

Middleware 関数

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

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

Config object (オプション)

オプションで、config object を Middleware 関数と一緒に export することができます。この object には、Middleware が適用される paths を指定するためのmatcherが含まれています。

Matcher

matcher オプションは、特定の paths を Middleware が実行する対象として指定することができます。これらの paths はいくつかの方法で指定することができます：

• 単一の path について： 直接 string を使用して path を定義します。たとえば、'/about'のように。
• 複数の paths について：複数の paths をリスト化するために配列を使用します。例えば、matcher: ['/about', '/contact']のように、Middleware を/aboutと/contactの両方に適用します。

さらに、matcherは、matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)']のような正規表現を通じて複雑な path 仕様をサポートしており、どの paths を含めるか除外するかについて精密な制御を可能にします。

matcherオプションは、以下のキーを持つ Object の配列も受け入れます:

• source：path または request paths に一致させるために使用されるパターンです。これは直接的な path 一致用の string であるか、より複雑な一致用のパターンであることができます。
• regexp(オプション)： source に基づいてマッチングを微調整する正規表現の string。これにより、含まれるまたは除外される paths をより詳細に制御できます。
• locale(オプション)：これがfalseに設定されていると、 path のマッチングにおいてロケールベースのルーティングを無視する boolean です。
• has(オプション): 特定の request 要素(例えば headers, query パラメーター、または cookies)の存在に基づく条件を指定します。
• missing(オプショナル)：特定の request 要素が欠けている状況に焦点を当てます。例えば、 missing headers や cookies などです。

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' }],
    },
  ],
}

Params

request

Middleware を定義する際、 default export 関数は一つのパラメーターrequestを受け入れます。このパラメータはNextRequestのインスタンスで、これは着信 HTTP request を表します。

import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // Middleware logic goes here
}

export function middleware(request) {
  // Middleware logic goes here
}

Good to know:

• NextRequestは、Next.js Middleware の中で入ってくる HTTPRequest を表す type であり、一方でNextResponseは、HTTPResponse を操作して返送するためのクラスです。

NextResponse

Middleware は、Web Response API を拡張するNextResponse object を使用できます。NextResponse object を返すことで、直接 cookies を操作したり、 headers を設定したり、 redirects を実装したり、 rewrite paths ことができます。

Good to know: redirects の場合、NextResponse.redirectの代わりにResponse.redirectも使用できます。

Runtime

Middleware はEdge runtimeのみをサポートしています。 Node.js runtime は使用できません。

Version History