🕌

Next.js の Middleware活用術：認証からアクセス制御まで

に公開
Next.js
TypeScript
Middleware
auth
reeact
tech

Middleware とは何か？

  • Next.js 12 以降で導入された機能
  • リクエストとレスポンスの間に挟まる処理
  • Express や NestJS などの Middleware に近いが、Vercel Edge Runtime 上で動作するため 超高速

Middleware の基本

  • ファイル配置
  • middleware.ts または middleware.js をプロジェクト直下に配置
    シンプルな例
ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  console.log('Middleware running:', request.url)
  return NextResponse.next()
}
  • NextRequest と NextResponse の役割を解説
  • Cookie 取得・書き込み
  • リダイレクトやレスポンスの書き換え

Middleware の適用範囲を制御する

matcher オプションの活用

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

全ページではなく一部のルートにのみ適用できる点を解説
実務例：「管理画面はログイン必須」「API だけチェック」

認証とアクセス制御

Cookie や JWT を用いた認証チェック

ts
export function middleware(req: NextRequest) {
  const token = req.cookies.get('token')
  if (!token) {
    return NextResponse.redirect(new URL('/login', req.url))
  }
  return NextResponse.next()
}

実務シナリオ：

ログインしていない場合は /login へリダイレクト
管理者権限を持たない場合はエラーを返す

国際化・A/Bテストへの応用

リクエストヘッダーを活用して国別にリダイレクト

ts
export function middleware(req: NextRequest) {
  const country = req.geo?.country || 'US'
  if (country === 'JP') {
    return NextResponse.rewrite(new URL('/jp', req.url))
  }
  return NextResponse.next()
}

実務例：

国ごとに LP を出し分ける
テストユーザーにだけ新機能を有効化する

パフォーマンスや注意点

Edge Runtime で実行されるため サーバーリソースを消費しない

ただし以下に注意：

  • Node.js の一部 API が使えない（fs, crypto など）
  • 重い処理は避ける（認証・リダイレクトに絞るべき）
  • Vercel の無料枠で試せる

まとめ

  • Middleware の特徴を再整理
    軽量かつ高速にリクエスト前処理ができる
    認証・アクセス制御・リダイレクトに最適
    実務の Next.js アプリで必須の機能になりつつある
  • 今後の発展（Next.js App Router との連携など）

Discussion