middleware.js
middleware.js|ts
ファイルは、リクエストが完了する前にサーバー上でコードを実行するために Middleware を記述するために使用されます。そして、受信したリクエストに基づいて、レスポンスをリライト、リダイレクト、リクエス トまたはレスポンスヘッダーの変更、または直接レスポンスを返すことで変更できます。
Middlewareはルートがレンダリングされる前に実行されます。特に、認証、ログ記録、リダイレクト処理といったカスタムサーバーサイドのロジックを実装するのに便利です。
Middlewareを定義するには、プロジェクトのrootに middleware.ts
(または.js)ファイルを使用します。例えば、app
やpages
と同じレベル、またはsrc
内に配置します。
- TypeScript
- JavaScript
middleware.ts
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*',
}
middleware.js
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*',
}