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

Reactjs – Next.js trouble with directories

I am running the tutorial for Next.js, and the first steps are very simple. Create a new page, and navigate to it after starting up your dev server on localhost:3000.

The new page is in the src/app directory, which according to the documentation has recently replaced the pages directory, so as far as I can tell, there should be no problem. but when I navigate to http://localhost:3000/posts/first-post I get a 404.

The following is my folder structure:
project folder structure

Contents of my jsconfig.json file:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

I tried changing the directory of course, moving it in and out the src/app directory, I tried re-starting the dev server, and I have tried changing the contents of the jsconfig.json file from

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

To

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/app/*"]
    }
  }
}
Tags:

3

Answers


  1. 0

    When migrating from pages to app structure, the naming of the file matters.

    In pages if you named your file a certain way, it created a route with the name of the file (in your case first-post). With the app folder structure, your pages have to been named page.[txs|jsx|js] to work.

    So if you wanted a page at /posts/first-post you would need a structure like

    app/
├─ pages/
│  ├─ first-post/
│  │  ├─ page.js

    You can always refer to the documentation for more details.

    Login or Signup to reply.
  2. 0

    That’s because Next is looking for a page.js file and isn’t finding any, therefore not making not even the route ‘posts’ public.
    You need to create a new folder "first-post" and inside a page.js file.

    Check the documentation here.

    Login or Signup to reply.
  3. 0

    That’s simply because, as per Nextjs Documentation :

    Each segment requires a page.[tsx,jsx] file. In this case, It is necessary for you to rearrange your files in the following format:

    app/
├─ posts/
│  ├─ first-post/
│  │  ├─ page.js
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search