Search code examples
reactjsauthenticationnext.jsclerk

Clerk layout isn't showing up


errors

Good day,

I'm using clerk for the first time. but after basic setup it's not redirecting to the sign in page. In the latest version they use

import { clerkMiddleware } from "@clerk/nextjs/server";


export default clerkMiddleware();

export const config = {
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

and it's not working for me. I saw in a youtube video they are using authMiddleware() instead of clerkMiddleware(). I tried to use authMiddleware() but it's giving me bruch of errors [in the image] but it's redirecting me to the sign in page.

'authMiddleware' is deprecated.ts(6385) authMiddleware.d.ts(85, 4): The declaration was marked as deprecated here.

SO I probably should use clerkMiddleware(). What should I do to fix this issue?


Solution

  • i was having the same problem and i found this solution, i hope it helps

    import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
    
    // Define which routes to protect
    const isProtectedRoute = createRouteMatcher(["/", "/credits(.*)"]);
    
    export default clerkMiddleware((auth, req) => {
      if (isProtectedRoute(req)) {
        auth().protect();
      }
    });
    
    export const config = {
      matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
    };
    

    I found that it is a problem that has happened to more people and it is the only way I found to solve it at the moment