Error: Clerk: auth() was called but Clerk can't detect usage of clerkMiddleware() (or the deprecated authMiddleware()). が発生する

前提

• dockerで環境構築をしています。
• Next.jsでsrcフォルダーを使用しています。

事象

next.jsでclerkを使用する際に以下のエラーメッセージが表示される。

エラーメッセージ

Error: Clerk: auth() was called but Clerk can't detect usage of clerkMiddleware() (or the deprecated authMiddleware()). 

middlewareは以下のように作成している。

middleware.ts

    import { authMiddleware } from "@clerk/nextjs";
    
    export default authMiddleware({});
    
    export const config = {
        matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
    };

原因

middleware.tsがルートに配置されていなかったため。

├── src/
│   ├── .next
│   ├── src/
│   │   ├── app/
│   │   │   ├── page.tsx
│   │   │   ├── layout.tsx
│   │   │   └── middleware.ts //ここに配置していました。
│   │   └── component/
│   │       └── ui/
│   │           └── button.tsx
│   └── .env
└── docker-compose.yml

修正

middleware.tsをルートに保存する

├── src/
│   ├── .next
│   ├── src/
│   │   ├── app/
│   │   │   ├── page.tsx
│   │   │   └── layout.tsx
│   │   ├── component/
│   │   │   └── ui/
│   │   │       └── button.tsx
│   │   │
│   │   │
│   │   └─ middleware.ts //ここに配置する
│   └── .env
└── docker-compose.yml

まとめ

• middleware.tsはルートに保存する必要がある。

参考資料

Clerk authMiddleware() is not being used even though it is in my middleware.ts file which is in the root of the application
https://stackoverflow.com/questions/77108110/clerk-authmiddleware-is-not-being-used-even-though-it-is-in-my-middleware-ts-f