27

In a create-next-app Next.js application, I want to move the pages folder in the root directory to a src folder. I added a jsconfig.json with the code (below), however now I get the error message "404 | This page could not be found." Anyone have any insight? (Sorry beginner to web development)

{
    "compilerOptions": {
        "baseUrl": "src"
    }
}
nmy1095
  • 333
  • 1
  • 3
  • 6
  • 1
    Can you show us the error you get when compiling? Note that you don't need to add any configuration to move `pages` inside `src` folder, Next.js will automatically look for it in `src` folder (as long as there's no `pages` folder in the root). – juliomalves Oct 23 '21 at 17:32
  • hey @juliomalves, thanks for the response. Sorry a lot wrong in my initial question, just edited it. So it compiles but I receive a 404 request (404 | This page could not be found). What I did was create a src directory, moved the pages folder into that directory, and then added a jsconfig.js file with the baseUrl set to src. Am I doing this wrong? – nmy1095 Oct 23 '21 at 17:49
  • 3
    Nextjs will look for your pages in either the [`/pages`] or the [`/src/pages`] folder and subfolders. There is nothing to configure in your `jsconfig.json`. In what folder did you put your pages' source files? Also, make sure you delete the folder [`/pages`] if you use [`/src/pages`]. [more info on https://nextjs.org/docs/advanced-features/src-directory] – Thierry Oct 23 '21 at 17:53

6 Answers6

50

Nextjs by default supports moving /pages to src/ folder.

  1. Create a /src folder in the root directory.
  2. Delete the /.next folder
  3. Move /pages to the /src folder Remember package.json, .gitignore and other config files needs to be in the root directory and should not be moved to the /src folder.

Once that is done just run the command $ npm run dev or $ yarn dev , so you can view it on your localhost.

More: https://nextjs.org/docs/advanced-features/src-directory

Johnson Fashanu
  • 897
  • 8
  • 6
  • 1
    Thanks for this. Could not figure out why my XProvider components were no longer being seen by their consumers. Deleting the /.next folder fixed it, I assume there must have been a caching issue. – LevPewPew Aug 04 '22 at 02:09
  • Keep in mind if using yarn, `yarn dev` won't work, you need to use `npm run dev` after deleting the `.next` directory – Daltron Nov 21 '22 at 18:33
  • 1
    @Daltron Just tried it with `yarn dev` and it worked fine. – Stephen Asuncion Nov 30 '22 at 00:42
11

In case you are using NextJS + TailwindCSS, you need to change the following in tailwind.config.js after moving files under the src directory:

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
...
...
Ssh Quack
  • 647
  • 10
  • 13
4

You need to stop the server and then do npm run dev. That solved my problem when I moved things into the src directory and started getting 404 pages.

Tommy Wolfheart
  • 440
  • 4
  • 16
2
content: [
'./src/pages/**/*.{js,ts,jsx,tsx}',
'./src/components/**/*.{js,ts,jsx,tsx}',

],

replace above in case of src

Ajay
  • 421
  • 5
  • 6
1

As @Thierry mentioned in the comments, according to the docs "Pages can also be added under src/pages as an alternative to the root pages directory. The src directory is very common in many apps and Next.js supports it by default."

So, src/pages will be ignored if pages is present in the root directory.

More at the official docs: https://nextjs.org/docs/advanced-features/src-directory

Charles Pine
  • 55
  • 9
0
  1. src/pages will be ignored if pages is present in the root directory
  2. Update tsconfig.json (if you use Typescript)
"paths": {
  "@/*": ["./src/*"]
}
  1. Reload npm run dev
Cristian Florescu
  • 1,660
  • 20
  • 24