Previously my project setup was

public
.next
src
   pages
   ponents
   assets
next.config.js

This was working fine but I changed the structure to following

public
src
   client
    next.config.js
    jsconfig.json
    pages
    ponents
    assets
   server
    index.js

now this one is not working. I am getting error Couldn't find apagesdirectory. Please create one under the project root

Here is my updated next.config.js

const withPlugins = require("next-pose-plugins");
const optimizedImages = require("next-optimized-images");
const withPWA = require("next-pwa");

module.exports = withPlugins(
    [optimizedImages],
    [
      withPWA({
        pwa: {
          dest: "public",
        },
      }),
    ],
    {
      distDir: '../../dist/client',
    }
);

for absolute import(import Button from 'ponents/Button')

jsconfig.json

{
    "pilerOptions": {
      "baseUrl": "client/"
    }
  }

package.json

"scripts": {
    "dev:client": "nextjs src/client",
    "dev:server": "node src/server --out-dir dist/server --source-maps --watch",
    "dev": "dotenv -e .env.development yarn dev:client & yarn dev:server",
    "build": "yarn build:client && yarn build:server",
    "build:client": "dotenv -e .env.production next build src/client",
    "build:server": "node src/server --out-dir dist/server --source-maps",
    "build:staging": "yarn build:staging:client && yarn build:server",
    "build:staging:client": "dotenv -e .env.staging next build src/client",
    "start": "next start",
  },

.babelrc

{

    "plugins": [
      [
        "styled-ponents",
        {
          "ssr": true,
          "displayName": true,
          "preprocess": false
        }
      ]
    ],
    "presets": [
      "next/babel"
    ]
  }

Previously my project setup was

public
.next
src
   pages
   ponents
   assets
next.config.js

This was working fine but I changed the structure to following

public
src
   client
    next.config.js
    jsconfig.json
    pages
    ponents
    assets
   server
    index.js

now this one is not working. I am getting error Couldn't find apagesdirectory. Please create one under the project root

Here is my updated next.config.js

const withPlugins = require("next-pose-plugins");
const optimizedImages = require("next-optimized-images");
const withPWA = require("next-pwa");

module.exports = withPlugins(
    [optimizedImages],
    [
      withPWA({
        pwa: {
          dest: "public",
        },
      }),
    ],
    {
      distDir: '../../dist/client',
    }
);

for absolute import(import Button from 'ponents/Button')

jsconfig.json

{
    "pilerOptions": {
      "baseUrl": "client/"
    }
  }

package.json

"scripts": {
    "dev:client": "nextjs src/client",
    "dev:server": "node src/server --out-dir dist/server --source-maps --watch",
    "dev": "dotenv -e .env.development yarn dev:client & yarn dev:server",
    "build": "yarn build:client && yarn build:server",
    "build:client": "dotenv -e .env.production next build src/client",
    "build:server": "node src/server --out-dir dist/server --source-maps",
    "build:staging": "yarn build:staging:client && yarn build:server",
    "build:staging:client": "dotenv -e .env.staging next build src/client",
    "start": "next start",
  },

.babelrc

{

    "plugins": [
      [
        "styled-ponents",
        {
          "ssr": true,
          "displayName": true,
          "preprocess": false
        }
      ]
    ],
    "presets": [
      "next/babel"
    ]
  }

• javascript
• reactjs
• next.js

2 Answers 2

As per the official NextJs documentation pages folder can be moved inside the src folder. But Config files like next.config.js and tsconfig.json should be inside the root directory, moving them to src won't work. Same goes for the public directory.

Move your next.config.js file to root folder.

Reference: https://nextjs/docs/advanced-features/src-directory

I managed to get the same error on a Windows system where my pages folder was called "Pages" (capital P). Renaming it to lowercase P fixed it.