NextJS cannot find a valid build in the '.next' directory

Question

I looked at the following question before asking this one but I believe mine is different because I am not using Docker: Nextjs fails to find valid build in the '.next' directory in production node_env

I also tried this approach of removing the '.next' folder but still get the same issue.

After fixing a host of other issues, I am down to one I cannot seem to resolve. When I try to deploy to Heroku I keep getting the following error:

node server.js

Could not find a valid build in the '.next' directory! Try building your app with 'next build' before starting the server.

Here is my package.json file:

{
  "name": "StarterApp",
  "version": "1.0.0",
  "engines": {
    "node": "10.4.1"
  },
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "mocha",
    "dev": "node server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "4.16.3",
    "fs-extra": "^5.0.0",
    "ganache-cli": "^6.1.3",
    "mocha": "^5.2.0",
    "next": "^4.2.3",
    "next-routes": "^1.4.2",
    "node-gyp": "^3.7.0",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "rebuild": "^0.1.2",
    "semantic-ui-css": "^2.3.2",
    "semantic-ui-react": "^0.79.1",
    "sha3": "^1.2.2",
    "solc": "^0.4.24",
    "truffle-hdwallet-provider": "0.0.3",
    "web3": "^1.0.0-beta.34"
  }
}

Server.js file:

const { createServer } = require('http');
const next = require('next');

const app = next({
  dev: process.env.NODE_ENV !== 'production'
});

const routes = require('./routes');
const handler = routes.getRequestHandler(app);

app.prepare().then(() => {
  createServer(handler).listen(5000, (err) => {
    if (err) throw err;
    console.log('Ready on localhost:5000');
  });
});

The app deploys without issue locally but I get this error when deploying to Heroku. What am I doing wrong?

Nelda

You have to create a build first. Run "next build" before "npm start" – Measureless

HEY! My server file looks identical. You didn't happen to be taking Stephen Griders Ethereum/Solidity course were ya? If so I have some automation of compile/deploy you should check out. – Gearbox

@NikHammer-Ellis Sorry for the long delay! Somehow missed this! Where can I check it out? Thanks! – Nelda

Answer 1

npm run build

then

npm run start

solved my problem.

Quinsy

Why do I need to build everytime tho? – Crocidolite

@NecmettinSargın because sometimes we delete the .next directory mistakenly so in that case, we can create that folder with the build command. – Quinsy

@NecmettinSargın we need to npm run build everytime to update the changes. A good option is to use npm run dev instead of npm start. It builds and start the proj at the same times. – Houselights

Answer 2

First

npm run-script build

Then

npm run start

Sigmatism

Welcome to Stack Overflow! please elaborate more or share few details about your answer. – Younts

I'm sorry to see the commenter didn't elaborate, but one thing's for sure: in my Windows 10 environment, using the official create-next-app, his answer is the only one here that worked. – Selfhelp

Answer 3

You can use this which builds and starts the project -

npm run dev

Millipede

Thanks. I didn't know in nextJs npm start only start the project not build. Thanks Again. – Houselights

Answer 4

Just see the error carefully:

Error: Could not find a production build in the 'E:\Developer's Area\weatherteller\.next' directory. Try building your app with 'next build' before s    at Server.readBuildId (E:\Developer's Area\weatherteller\node_modules\next\dist\next-server\server\next-server.js:146:355)
    at new Server (E:\Developer's Area\weatherteller\node_modules\next\dist\next-server\server\next-server.js:3:120)
    at createServer (E:\Developer's Area\weatherteller\node_modules\next\dist\server\next.js:2:638)
    at start (E:\Developer's Area\weatherteller\node_modules\next\dist\server\lib\start-server.js:1:323)
    at nextStart (E:\Developer's Area\weatherteller\node_modules\next\dist\cli\next-start.js:19:125)
    at E:\Developer's Area\weatherteller\node_modules\next\dist\bin\next:27:115

while running

npm start 

It's not able to locate the production build which is required to launch the next app. While creating next app using

npm install next react react-dom --save

.next folder was not created so you need to create the .next folder first using

npm build

which will consist of all your production build files.

After npm build the folder will be created and you can run your app using

npm start

Also, make sure these scripts are in your next app

"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },

Hope this resolves your error 😀😀

Aeriel

Answer 5

In my case I specified a custom port for NextJs (shown in bellow) and that was the reason I got this error.

this is how i set a custom port npm start -p 3001 ❌ this is how it should be: 1. change the port in package.json file scripts section from next start to next start -p 3001 ✔️

or

you can just use yarn and pass the argument just like this yarn start -p 3001 ✔️

Contra

Answer 6

NextJS building may be (depending on your project size), be extremely large, something that can cost you money during deploys. You can apply the following to your package.json

{
    "script": {
        "build": "next build",
        "heroku-postbuild": "npm run build",
        "start": "next start"
    }
}

Kimbro

Answer 7

I was getting this error when trying to start a production server from the build directory after setting.

  distDir: 'build',

actual error

Error: Could not find a production build in the '/home/username/awesome-app/build/build' directory. Try building your app with 'next build' before starting the production server. https://nextjs.org/docs/messages/production-start-no-build-id

and my start command

$ next start build

so I moved the next build directory to another directory named build and it works, and if you are using environment variable put that file inside the build directory.

Conyers

Answer 8

I had the same issue once.

First, remove package-lock.json or yarn.lock files and node_modules folder and make sure you install all the packages again with the yarn command. I had to run yarn build first and then the yarn start command was working fine afterward.

Also if the currently used port is taken by another app you will have issues running your dev environment. You can easily fix that by going into the package.json file and modifying the "dev" script like this: "dev": PORT=7080 next dev".

Also possibly you are mixing Next.js with React because in Next.js you should use yarn dev to start your project for development instead of yarn start.

I hope this was helpful to you.

Boscage

Answer 9

I solved this problem by changing the node version using nvm (node version manager):

nvm install 16.17.0
nvm use 16.17.0

If you use Windows 10, visit https://www.freecodecamp.org/news/nvm-for-windows-how-to-download-and-install-node-version-manager-in-windows-10/

Thermodynamics

Answer 10

Use the latest node version and you can delete it.next file

Fortenberry

Answer 11

To run a local development server, you need to have package.json with

"scripts": {
    "dev": "next dev",
     ...
}

Whereas "node server.js" is used to serve a "standalone build" created with next build. Which assumes you must have output: "standalone" in your next.config.js (whatever your file is):

module.exports = {
  output: "standalone"
}

Really good for production.

Pandemic

Answer 12

npm run build will generate the .next folder you need!

Physiognomy