Web Frontend2026-05-17
Middleware(ミドルウェア)
別名: Middleware / ミドルウェア / Next.js Middleware
HTTP リクエストとレスポンスの間に挟まる処理層。Next.js では `middleware.ts`(v15 以前)または `proxy.ts`(v16 以降)にルーティング制御・認証チェック・ジオリダイレクトなどを実装し、Edge Runtime で実行される。
概要
Next.js の Middleware はリクエストが実際のルートハンドラに到達する前に実行されます。認証トークンの検証・多言語リダイレクト・A/B テスト・レートリミットなどに利用されます。Next.js 16 では `middleware.ts` が非推奨となり `proxy.ts` へのリネームが必要です。
matcher 設定
`matcher` 設定で Middleware を実行するパスを絞ることでパフォーマンスを最適化できます。推奨パターンは `/((?!api|trpc|_next|_vercel|.*\\..*).*)` です。Vercel + Next.js 16 完全ガイド に詳細があります。
関連コラム
Web Development
Vercel + Next.js 16でWebサイトを構築する完全ガイド【2026年版】
2026年、Next.js 16とVercelを使ったWebサイト構築は、Turbopackによる400%高速化、React Server Components、v0 AI生成により劇的に進化しました。月額$20から始められる本格的なWeb開発環境の全貌を解説します。
Web Development
Hono + Inertia + React の認証完全ガイド — Better Auth / Lucia / セッション設計の選び方と実装パターン【2026年版】
Hono + Inertia + React で認証を「ちゃんと」設計するための完全ガイド。Better Auth / Lucia / 自前セッションの選び方、CookieベースとJWTの選択、Inertia の auth プロパティ共有、ロール・認可、OAuth(Google / GitHub / LINE)、パスワードリセットまで実装パターンを整理します。
Software Dev
Hono完全ガイド — 超軽量・超高速なマルチランタイムWebフレームワークの始め方【2026年版】
Honoは依存関係ゼロ・12KB未満・Web Standards準拠のTypeScriptファーストWebフレームワーク。Cloudflare Workers/Deno/Bun/Node.jsで同一コードが動作し、週間900万ダウンロードを誇る。セットアップから本番運用まで徹底解説。
お気軽にご相談ください
お問い合わせ