今回はNext.jsのmiddlewareに関しての記事になります。
本記事は Next.js 13 以降の App Routerを前提として解説しています。

1.Next.jsのmiddlewareでできること

Next.jsのmiddlware.tsは、リクエストがルートやAPIに到達する直前に処理を差し込める機能です。Edge Runtime上で動作する軽量な前処理レイヤーとして、以下のようなことに使われます。

・認証ガード: /mypageなどの保護ルートに未ログインユーザーをリダイレクト
・Basic認証: .envで環境を判定して、ステージング環境などでベーシック認証をかける

2.実行タイミングと適用範囲

実行タイミング
・すべてのリクエスト(ページ表示、 API呼び出し、画像取得など)の直前
・SSR/ISR/CSRすべてに適用される
・クライアント側(ブラウザ)には一切表示されない

除外設定をしたいときはmatcherを使う

export const config = {
   matcher: ['/((?!api/v1/revalidate).*)'],
}

このようにして、特定のルートを除外することができます。

3.middlewareの基本的な書き方

middleware.tsをプロジェクトルートまたはsrc/配下に設置すれば自動で読み込まれます。

// middleware.ts
import { NextRequest, NextResponse } from 'next/server'

export function middleware(request: NextRequest) {
  const url = request.nexturl

  // 認証チェック
　const isLoggedIn = request.cookie.get('session')
  if(!isLoggedIn && url.pathname.startWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url))
  }
  
  return NextResponse.next() // 通常通り処理を継続
} 

POSTとGETを分けて制御したい場合

if (request.method === 'POST') {
  // POST専用の処理(例: 外部Webhookの検証)
}

matcherによる適用範囲の制御

export const config = {
  matcher: ['/dashboard/:path*', '/admin/:path*']
}

ここのpathに関してmiddlewareを適用させる。

まとめ

・matcher を設定すると、指定したパスにだけmiddlewareが適用される
・:path* はワイルドカードで、「その階層以下すべて」を意味する
・何も設定しない場合、全リクエストがmiddlewareの対象になります