Next.jsのプロジェクトを眺めていると、middleware.tsというファイルを見かけることがあります。ページのコンポーネントでもAPIルートでもない、少し変わった立ち位置のファイルです。今回はこのmiddlewareが何をしているのか、1つのテーマとして掘り下げてみます。

middleware.tsは何をするファイルか

middleware.tsはプロジェクトのルート（またはsrc直下）に1つだけ置くファイルで、リクエストがページやAPIルートに届く前に、必ず一度実行される処理を書く場所です。

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

export function middleware(request: NextRequest) {
  console.log('リクエストが来ました:', request.nextUrl.pathname);
  return NextResponse.next();
}

このファイルを置くと、サイト内のどのページにアクセスしても、まずこのmiddleware関数が呼ばれます。個々のページコンポーネントに1つずつ処理を書いて回るのではなく、入り口を1箇所にまとめて共通処理を差し込めるのが最大の特徴です。

よくある使い道: ログインしていない人をリダイレクトする

一番典型的な使い方は、認証チェックです。

// 悪い例: 各ページのコンポーネントで毎回チェックする
export default async function DashboardPage() {
  const session = await getSession();
  if (!session) {
    redirect('/login');
  }
  return <div>ダッシュボード</div>;
}

保護したいページが増えるたびに、このチェックをページごとにコピーして回ることになります。書き漏れると、そのページだけ認証なしでアクセスできてしまうリスクもあります。

// 良い例: middlewareで一括チェックする
export function middleware(request: NextRequest) {
  const session = request.cookies.get('session');

  if (!session && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: '/dashboard/:path*',
};

config.matcherで「どのパスに対してmiddlewareを実行するか」を指定できるので、/dashboard配下だけをまとめてガードする、といった書き方ができます。新しくページを追加しても、/dashboard配下に置く限りは自動的にチェック対象になります。

気をつけたい点: middlewareは「ページの中身」を知らない

ここで注意したいのは、middlewareが実行されるタイミングです。middlewareはページのコンポーネントが描画される前に動くリクエストレベルの処理なので、そのページの中でどんなデータを取得するか、どんなReactコンポーネントを使うかは一切関知しません。見ているのはURLのパスやCookie、リクエストヘッダーといった「リクエストそのものの情報」だけです。

そのため、「このページはログインユーザーのプランによって表示を変えたい」のように、ページ固有のデータに依存する判断は、middleware側ではなくページコンポーネント側で行う必要があります。middlewareに寄せられるのは、あくまで「通す/通さない」「リダイレクトする/しない」といったリクエスト単位の判断までです。

AIに依頼するときのポイント

AIに「認証チェックを入れて」とだけ頼むと、各ページに個別のチェックを追加される場合と、middlewareにまとめてもらえる場合の両方があり得ます。保護したいページが複数ある、または今後増えていく見込みがあるなら、「middlewareで一括対応してほしい」と伝えると、共通処理として1箇所にまとまったコードが返ってきやすくなります。

どこに処理を置くべきかを自分で判断してAIに指示できるようになると、AIが返してきたコードの構造が妥当かどうかも見極めやすくなります。これはコードの書き方そのものと同じくらい、身につけておく価値のある視点です。

面談なしで、今日から始められます

この講座は 未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまで を全20セッションで体系化した教材付きプランです。無料相談を挟まず、申し込んだその日から教材で学習を始められます。AIが学習パートナーになって何度でも質問でき、つまずいた所だけチャットで直接サポートします。

  • 今日から始める（教材完全版＋月5,500円・チャット質問し放題・いつでも解約OK）→ https://menta.work/plan/20251?ref=menta-knowledge
  • いきなりは不安な方へ：無料の教材体験版もあります（最初の数セッション分）→ プラン詳細をご覧ください