Added @clerk/nextjs and now I get 404s on my protected routes #66037

JamesSingleton · 2024-05-21T15:47:58Z

JamesSingleton
May 21, 2024

Summary

I am working on adding a /admin/* route to my website and decided to use @clerk/nextjs for this. However, I noticed that my not-found.tsx gets returned when developing locally when I am on a protected route.

This is what my route structure looks like:

However, when I go to /admin/home or /admin/transfer-portal I get my not-found.tsx

In my /admin/home/page.tsx I have

const { userId } = auth()
const user = await currentUser()

console.log(user)
console.log('User ID:', userId)

and both return data, so I know I am logged in.

I am sure that I have something setup weird causing some potential race conditions.

Additional information

This is the `middleware.ts`

This is what my `app/layout.tsx` looks like


import './globals.css'

import { ClerkProvider } from '@clerk/nextjs'
import { GeistSans } from 'geist/font/sans'
import { GeistMono } from 'geist/font/mono'

import type { Viewport } from 'next'

export const viewport: Viewport = {
  themeColor: '#DC2727',
}

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider>
      <html
        lang="en"
        suppressHydrationWarning
        className={`${GeistSans.variable} ${GeistMono.variable}`}
      >
        <body className="flex min-h-screen flex-col bg-background font-sans antialiased">
          {children}
        </body>
      </html>
    </ClerkProvider>
  )
}


```ts
import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'

const isProtectedRoute = createRouteMatcher(['/admin(.*)'])

export default clerkMiddleware((auth, req) => {
  if (isProtectedRoute(req)) auth().protect()
})

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



### Example

_No response_

colinclerk · 2024-05-21T16:18:39Z

colinclerk
May 21, 2024

Colin from Clerk here. We've seen this on latest as well and are investigating if it's a Next.js issue or a Clerk issue.

0 replies

colinclerk · 2024-05-21T16:19:37Z

colinclerk
May 21, 2024

@JamesSingleton have you seen this while navigating, or only after saving and the app does a fast refresh?

3 replies

JamesSingleton May 21, 2024
Author

@colinclerk, So far I have only seen this while I have http://localhost:3000/admin/home open and I hit save in app/admin/home/page.tsx. Now I did have app/admin/page.tsx instead of app/admin/home/page.tsx but kept seeing [slug]/page.tsx being recompiled every time I hit save so I moved away from that. I have not gotten this while going from lets say /admin/home to /admin/transfer-portal or /admin/vote.

jojech Jul 14, 2024

I'm seeing this while navigating @colinclerk. Is there a solution for this?

sheamcdevitt Aug 24, 2024

Still getting this error - is there a fix for this @colinclerk

amanuel-s-tadesse · 2024-09-26T19:52:47Z

amanuel-s-tadesse
Sep 26, 2024

this is a version is match it should be good after you upgrade your nextjs to latest version.
upgrading works for me

0 replies

hSwachchha · 2024-10-14T19:53:50Z

hSwachchha
Oct 14, 2024

Im also seeing the issue, apparently only the protected routes are getting "Page not found 404" errror, i have added custom middleware for each of the protected routes, and made them public in clerk middleware.js, as my project is small, im planning to use it that way, but i do want a permanent solution fast

0 replies

DanyloLyha · 2025-03-25T18:21:22Z

DanyloLyha
Mar 25, 2025

Hello guys, in my case I'm facing 404 page after refresh on protected route. @colinclerk

1 reply

therealsharat Apr 16, 2025

Same, this is happening for my project as well

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Added @clerk/nextjs and now I get 404s on my protected routes #66037

Uh oh!

{{title}}

Uh oh!

Replies: 5 comments 4 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Added @clerk/nextjs and now I get 404s on my protected routes #66037

Uh oh!

Summary

Additional information

Replies: 5 comments · 4 replies

Uh oh!

Uh oh!

Uh oh!

JamesSingleton May 21, 2024 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 5 comments 4 replies

JamesSingleton May 21, 2024
Author