Moving Pages folder in Next.js application to src folder

Question

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"
    }
}

Answer 1

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

Answer 2

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}',
  ],
...
...