Clerk.com don't protect private route fully

Question

I have an app using NextJs, clerk.com, and hosted with Netlify.

While running in dev mode locally I have 0 problems, something odd appear when my app is online. I have a public page (index.tsx) where I have a button routing to a private page.

If I go to the public page, then click on it, I don't have the redirection to the clerk authentication, but i do if I refresh the private page.

Again, this work well one local dev mode, just not anymore when builded and deployed on Netlify. I've search a lot but I don't found any results.

middleware.ts

import { authMiddleware } from "@clerk/nextjs";


export default authMiddleware({
  publicRoutes: ["/api/public/(.*)", "/", "/api/tracking-api/(.*)"],
});

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

Answer 1

Well, after some research I couldn't figure out why it was acting lik that, so in my private page I put

import { RedirectToSignIn, SignedIn, SignedOut, useAuth } from "@clerk/nextjs";

{...}
<>
  <SignedIn>
    {/* My other components */}  
  </SignedIn>
  <SignedOut>
    {/* 
      Non-authenticated visitors will be redirected
      to the sign in page.
    */}
    <RedirectToSignIn />
  </SignedOut>
</>