CODEWITHSUNDEEP
next.jsfrontend
tomahoc
tomahoc

Reputation: 5

Next.js 404 Error when visiting dynamic route with correct folder structure

I'm encountering a 404 error (This page could not be found.) when trying to visit a dynamic route in my Next.js project. The specific route is http://localhost:3000/blog/id, and I'm using Next.js in its latest version.

Here's my folder structure:

 app
  blog
    [id].tsx
       page.tsx

I expect the [id].tsx file to handle the dynamic route, but for some reason, it's not working as expected.

Any ideas on what might be causing this issue or how I can troubleshoot it further?

Thanks in advance for your help!

I expect the [id].tsx file to handle the dynamic route, but for some reason, it's not working as expected.

Upvotes: 0

Views: 1003

Answers (1)

Sean W
Sean W

Reputation: 6638

It seems that the folder or file name, or the structure of your Next.js app directory, is incorrect. The [id] should be a folder, not a file. If it is already a folder, remove the extension from its name, e.g. .tsx.

Current structure:

blog > [id].tsx > page.tsx

Corrected structure:

blog > [id] > page.tsx

The pages directory in Next.js supports dynamic routes through file naming conventions. However, the app directory does not function in the same way. That's why we must use directories (folders) instead of file names in the Next app directory.

Upvotes: 1

Related Questions