Next.js ミドルウェアが動作しない場合の解決策

Next.js アプリケーションでミドルウェアが正しく動作しない場合、いくつかの要因が考えられます。この問題はNext.jsのバージョンやプロジェクト構造によって対処法が異なるため、状況に応じた適切な対応が必要です。

問題の概要

Next.jsのミドルウェアは、リクエストがページやAPIルートに到達する前に実行される関数です。しかし、以下のような状況で期待通りに動作しないことがあります：

• 特定のパスにアクセスしてもリダイレクトが行われない
• ミドルウェア内のconsole.logが出力されない
• 404エラーが表示される

主要な解決策

1. ファイルの配置場所を確認する

ミドルウェアファイルの配置場所は、プロジェクトが使用しているルーティング方式（Pages Router または App Router）やsrcディレクトリの有無によって異なります。

App Router + srcディレクトリ

プロジェクトルート/
├── src/
│   ├── app/          # App Router
│   └── middleware.ts # ミドルウェア
├── package.json
└── next.config.js

App Router (srcなし)

プロジェクトルート/
├── app/              # App Router
├── middleware.ts     # ミドルウェア
├── package.json
└── next.config.js

Pages Router

プロジェクトルート/
├── pages/            # Pages Router
├── middleware.ts     # ミドルウェア
├── package.json
└── next.config.js

TIP

Next.jsの公式ドキュメントでは、ミドルウェアファイルは以下に配置することが推奨されています：

• pagesフォルダと同じ階層
• srcフォルダを使用している場合はsrcフォルダ内

2. ファイル名と拡張子を確認する

ミドルウェアファイルの命名規則はバージョンによって異なります：

• Next.js 12.2以上: middleware.js または middleware.ts
• Next.js 12.2未満: _middleware.js または _middleware.ts（pagesフォルダ内に配置）

また、next.config.jsでpageExtensionsをカスタマイズしている場合、ミドルウェアファイルにも同じ命名規則を適用する必要があります：

// next.config.js
const nextConfig = {
  pageExtensions: ["page.tsx", "api.ts", "middleware.ts"],
};

module.exports = nextConfig;

この設定では、ミドルウェアファイルはmiddleware.tsという名前にする必要があります。

3. Next.jsのバージョンに対応する

古いバージョンのNext.jsを使用している場合、ミドルウェアの動作に問題がある可能性があります。最新バージョンにアップグレードすることで解決することがあります：

npm install next@latest react@latest react-dom@latest eslint-config-next@latest

4. 静的エクスポート設定を確認する

next.config.jsでoutput: 'export'を設定している場合、ミドルウェアは動作しません。ミドルウェアを使用する場合はこの設定を削除してください：

// ミドルウェアを使用する場合は削除する
// output: 'export',

5. タイプスクリプト設定を確認する

TypeScriptを使用している場合、tsconfig.jsonにミドルウェアファイルを含めているか確認してください：

{
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "middleware.ts"  // 明示的に追加
  ]
}

6. コンソールの確認場所に注意する

ミドルウェア内のconsole.logはブラウザのコンソールではなく、サーバー側のターミナルに出力されます。開発サーバーを実行しているターミナルを確認してください。

実装例

以下は正しく動作するミドルウェアの実装例です：

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

export function middleware(request: NextRequest) {
  console.log('ミドルウェアが実行されました', request.method, request.url)
  
  // /test へのアクセスを / にリダイレクト
  if (request.nextUrl.pathname === '/test') {
    return NextResponse.redirect(new URL('/', request.url))
  }
  
  return NextResponse.next()
}

// ミドルウェアを適用するパスを設定
export const config = {
  matcher: ['/test', '/api/:path*'],
}

代替手段：next.config.jsでのリダイレクト

単純なリダイレクトのみが必要な場合は、ミドルウェアの代わりにnext.config.jsで設定することもできます：

// next.config.js
const nextConfig = {
  async redirects() {
    return [
      {
        permanent: true,
        source: "/test",
        destination: "/",
      },
    ];
  },
};

module.exports = nextConfig;

トラブルシューティングチェックリスト

1. ✅ ミドルウェアファイルが正しい場所に配置されているか
2. ✅ ファイル名と拡張子が正しいか（タイポがないか）
3. ✅ Next.jsのバージョンが適切か
4. ✅ next.config.jsの設定がミドルウェアと競合していないか
5. ✅ tsconfig.jsonにミドルウェアファイルが含まれているか
6. ✅ サーバーのターミナルでログを確認しているか
7. ✅ 開発サーバーを再起動したか

まとめ

Next.jsのミドルウェアが動作しない場合、ほとんどの問題はファイルの配置場所や命名規則に関連しています。プロジェクトの構造と使用しているNext.jsのバージョンに応じて、適切な配置場所を選択することが重要です。最新のNext.jsでは、srcディレクトリを使用している場合はsrc/middleware.ts、使用していない場合はプロジェクトルート直下のmiddleware.tsが一般的な解決策となります。

WARNING

Next.jsは頻繁にアップデートされるため、公式ドキュメントで最新の情報を常に確認することをお勧めします。