[Next.js]middlewareでリダイレクトさせた際エラーになる

環境
Next13

問題

認証機能を実装した際、認証がまだのユーザーはmiddleware.tsでログインページにリダイレクトさせるみたいな処理を書いた時に遭遇したエラー

middleware.ts

  if (!session && !req.nextUrl.pathname.startsWith('/login')) {
    const redirectUrl = req.nextUrl.clone()
    redirectUrl.pathname = '/login'
    return NextResponse.redirect(redirectUrl)
  }

  return res

error内容

✖︎_next/static/chunks/webpack.js:1 Uncaught SyntaxError: Unexpected token '<'

✖︎main-app.js:1 Uncaught SyntaxError: Unexpected token '<'

なんかうまくコンパイルできてない？

解決

middleware.tsでconfigをexportしてください。

middleware.ts

// ...
// 追加
export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
}

正規表現は公式から取ってきました。
これは「次のパスから来たアクセスはmiddlewareを通さない」という意味ですが、nextが何らかのリクエストを/next/*で行なっているのでその邪魔をしないようにするということみたいです。そんなん知らん。

* - api (API routes)
* - _next/static (static files)
* - _next/image (image optimization files)
* - favicon.ico (favicon file)

参考