Next.js にて Middleware を使用する

環境

• Next.js v15
• React v19
• TypeScript v5

サンプルコード

構成

/src 直下に middleware.ts 置かないと動かない。

/src
  ├ /app (App Router)
  └ middleware.ts

middleware.ts

Middleware - Next.js の内容をほぼコピペ。

• NextResponse - Next.js
• NextRequest - Next.js

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

// This function can be marked `async` if using `await` inside
export function middleware(request: NextRequest) {
	const response = NextResponse.next()
	console.log("==================")
	console.log(`middleware ( ${request.url} )`)
	console.log("==================")
	return response
}

// See "Matching Paths" below to learn more
export const config = {
	matcher: "/((?!api|assets|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)",
}

matcher について

• Matching Paths - Middleware - Next.js

下記は、
以下のファイルやディレクトリ内のファイル以外、
のファイルをロードした時やエンドポイントにアクセスした時に、
ミドルウェアを呼ぶという記述。

export const config = {
	matcher: "/((?!api|assets|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)",
}

何も記述しないと、
例えば favicon.ico がロードされた時にまでミドルウェアを呼んでしまっていた。