Hi everyone,

I'm working on a Next.js (App Router) project using NextAuth.js for authentication. My goal is to make certain pages (like /) public, while protecting the rest of the app so only authenticated users can access them. However, my landing page / is being treated as protected, and after signing out, I'm immediately redirected to the sign-in page-even when I just want to view the public landing page.

What I'm Trying to Achieve
Landing page /: Publicly accessible (no login required)

Other pages: Require authentication (redirect to sign-in if not logged in)

I set up ProtectedRoute and middleware for this purpose.

Problem
When I visit /, I get redirected to /auth/signin even though I want / to be public.
After signing out, I'm also redirected to sign-in instead of staying on the public landing page.

What I've Tried
Double-checked the publicPaths array in my middleware.
Tried adjusting the matcher config.
Searched docs and forums, but most examples only show how to protect everything or a specific subpath like /dashboard

Questions
How can I make sure / or /contact-us is public and not protected by the middleware?
Is my approach with publicPaths and the matcher correct, or is there a better way to handle public vs. protected routes in Next.js with NextAuth.js?

Any help, code samples, or references would be greatly appreciated!