Next.js の middleware でファイルのアクセスが弾かれるときに確認すること

こんにちは、フロントエンドエンジニアの上條（mk-0A0）です。
弊社 Gaji-Labo ではスタートアップ支援を行っており、支援できる技術の幅をもっと広げられたらという気持ちで個人的に認証・認可周りの勉強を進めています。実装を進めるなかで middleware 起因でスタイルなどが効かなくなるという事象に遭遇し、解決にかなり時間を費やしてしまったため備忘録として記事にしたいと思います。

やっていたことと発生した事象

認証・認可ライブラリである Auth.js 公式の Getting Started に載っている手順に沿って実装をしていたところ、キャプチャのようにスタイルが効かず、画像が表示されていませんでした。
Auth.js | Installation

使用していた各パッケージのバージョンは2024年12月時点で比較的新しいものです。

• Next.js v15.0.3
• React v19.0.0
• Auth.js v5.0.0-beta.25

原因

ブラウザのコンソールを見たところ、以下のエラーが出ていました。
Uncaught SyntaxError: Unexpected token '<'

調べるとスタイルや画像などのファイルが Next.js の middleware によって弾かれてしまい、結果として先述した状態になるようです。
参考：[Next.js]middlewareでリダイレクトさせた際エラーになる #React – Qiita

この時点での middleware の中身はリダイレクト処理だけしている状態です。

// middleware.ts
import { auth } from "@/auth"
 
export default auth((req) => {
  if (!req.auth && req.nextUrl.pathname !== "/login") {
    const newUrl = new URL("/login", req.nextUrl.origin)
    return Response.redirect(newUrl)
  }
})

上記のリダイレクト処理を適用する範囲を指定していなかった事によって、スタイルや画像などのファイルが弾かれてしまうのが根本の原因でした。
Routing: Middleware | Next.js

解決策

middleware の config で matcher を指定することでファイルが弾かれることなく読み込まれるようになりました。指定したパスは Next.js の公式から取ってきたものです。

// middleware.ts
import { auth } from "@/auth"
 
export default auth((req) => {
  if (!req.auth && req.nextUrl.pathname !== "/login") {
    const newUrl = new URL("/login", req.nextUrl.origin)
    return Response.redirect(newUrl)
  }
})

export const config = {
  matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
}

参考までに、効いてなかったスタイルや画像ファイルのパスは以下がありました。

• /_next/static/css/app/layout.css
• /next.svg

middleware の役割や matcher の挙動については前回の記事で書かせていただいているので、ぜひご覧ください。

まとめ

解決まで時間がかかった原因として、middleware の挙動をよく知らないまま実装していたため原因に当たりが付けられなかったことが大きいです。それを受けて書いたのが先述した記事なので、そちらも併せて読んでいただけるとより理解がより深まるかと思いました。
引き続き Gajj-Labo が支援しているプロダクトチームにより良い技術力を提供できるよう、知識や技術力を磨いていきたいと思っています。
技術を磨きたい方、スタートアップ支援に興味のある方、ぜひカジュアル面談しましょう！

Gaji-Labo フロントエンドエンジニア向けご案内資料