I've been following a YouTube tutorial (https://youtu.be/zgGhzuBZOQg) to create a next.js project with Clerk. However, I keep encountering error messages in the terminal every time the site loads:
Error: Clerk: auth() was called but Clerk can't detect usage of clerkMiddleware() (or the deprecated authMiddleware()). Please ensure the following:
- clerkMiddleware() (or the deprecated authMiddleware()) is used in your Next.js Middleware.
- Your Middleware matcher is configured to match this route or page.
- If you are using the src directory, make sure the Middleware file is inside of it.
For more details, see https://clerk.com/docs/quickstarts/nextjs
at stringify (<anonymous>)
at stringify (<anonymous>)
digest: "4043468081"
⨯ Error: Clerk: auth() was called but Clerk can't detect usage of clerkMiddleware() (or the deprecated authMiddleware()). Please ensure the following:
- clerkMiddleware() (or the deprecated authMiddleware()) is used in your Next.js Middleware.
- Your Middleware matcher is configured to match this route or page.
- If you are using the src directory, make sure the Middleware file is inside of it.
For more details, see https://clerk.com/docs/quickstarts/nextjs
at stringify (<anonymous>)
at stringify (<anonymous>)
digest: "3666937045"
⨯ Error: Clerk: auth() was called but Clerk can't detect usage of clerkMiddleware() (or the deprecated authMiddleware()). Please ensure the...
This is my middleware.ts file:
import { clerkMiddleware } from "@clerk/nextjs/server";
export default clerkMiddleware();
export const config = {
matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
};
Project file structure: file structure
Anyone able to assist with this issue? Thank you!
I attempted relocating the middleware.ts to a newly created src folder in an attempt to resolve this error, but unfortunately, it did not work.