Question 192569 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Can't access page I created in React + Next.js App with App Router

I am just starting to develop a web app using React and Next.js. I created the app by running the command npx create-next-app. Next, I added a new webpage my-new-page.tsx in the same directory as the app’s homepage page.tsx.

Note that this app uses App Router not Pages Router.

(You can see this app at github.com/thomzi12/app-with-new-page)

When I run npm run dev I can see page.tsx rendered at http://localhost:3000/. Makes sense.

However, when I go to http://localhost:3000/my-new-page … I get a 404.

How do I access the page I just created?

Some hypotheses:

  • I need to add the new page to some configuration? But I don’t see page.tsx registered anywhere, so that’s not the issue?
Tags:

2

Answers


  1. 0

    I think you are using Nextjs 13 with new app directory.

    Nextjs 13 has folder baser routing. Each folder inside app directory acts a route (url) if it has page.tsx(.js|.ts|.jsx).

    In your case, create a folder in app directory with name my-new-page and inside this create your page component as page.tsx or page.jsx.

    Now you can access this page at http://localhost:3000/my-new-page

    Hope this helps.

    You can message further if you still get issue

    Login or Signup to reply.
  2. 0

    You need to add a folder called app-with-new-page and inside you will need to add another page.tsx. You an learn more about Next.js’s routing conventions in the official documentation.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search