Next.js 404 Error when Trying to Access Page

Question

I'm encountering a 404 error when attempting to access a page in my Next.js project. I've followed the guidance provided in the documentation and various online resources, but the issue persists. Here's my setup:

My Next.js project structure looks like this:

• my-nextjs-project/
  • app/
    • profile.js project directory accessing page

When I try to access the profile page using the URL http://localhost:3000/profile, I get a 404 error. It seems like Next.js isn't recognizing the configuration

I'm seeking guidance on how to resolve this issue. If anyone has experience with Next.js routing and can help me identify what might be causing this 404 error, I'd greatly appreciate it. Is there something I might be overlooking or a common mistake that could be causing this problem? Thanks in advance for your help!

Answer 1

In order to create a route like that in Next JS using app router, you have to create a folder for every route with the main js file of that page/route inside. Here is the explanation in next js documentation.