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?

• Shahaf Antwarg: You have to create a build first. Run "next build" before "npm start"
• Nik Hammer-Ellis: 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.
• Captain Kirk: @NikHammer-Ellis Sorry for the long delay! Somehow missed this! Where can I check it out? Thanks!

Answer 1

npm run build

then

npm run start

solved my problem.

• Necmettin Sargın: Why do I need to build everytime tho?
• Mahendra Pratap: @NecmettinSargın because sometimes we delete the .next directory mistakenly so in that case, we can create that folder with the build command.
• navinrangar: @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.
• jumping_monkey: Hi Mahendra, do you use npm run start in production?

Answer 2

First

npm run-script build

Then

npm run start

• reptildarat: Welcome to Stack Overflow! please elaborate more or share few details about your answer.
• Edward Munch: 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.

Answer 3

You can use this which builds and starts the project -

npm run dev

• navinrangar: Thanks. I didn't know in nextJs npm start only start the project not build. Thanks Again.

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 😀😀

Answer 5

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.

Answer 6

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 ✔️

Answer 7

I had a similar problem with Render hosting. I'm going to provide additional details about the issue and how I solved it, as it might help you.

CONTEXT

When deploying my web service developed in Next.js with TypeScript, I had the following error in the console:

throw new Error(`Could not find a production build in the '${opts.config.distDir}' directory. Try building your app with 'next build' before starting the production server. https://nextjs.org/docs/messages/production-start-no-build-id`);

And then:

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

SOLUTION

It seems that the problem was missing the next build command, but what was actually missing was updating the Node version. So go to the environment variable settings and adjust as needed. In my case, it was

NODE_VERSION 18.18.0

• Salamit: I'm very grateful!

Answer 8

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

Answer 9

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.

enter image description here

Answer 10

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.

Answer 11

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/

Answer 12

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

Answer 13

This error indicates that the Next.js project was not compiled before running in production mode.The problem will be solved this way !

Run Firstly

npm run build 

--> Compiles the Next.js project into a production-ready build.

And Run Normally

npm run start 

--> Starts the compiled production build.

OR

If you're in development mode, you don't need to build manually.

Simply run

npm run dev

--> If you are still having problems with this,Sometimes old cache files or corrupt node_modules folder can freeze the compilation process.

To do this, run the following in terminal

For macOS/Linux:

rm -rf .next node_modules package-lock.json
npm cache clean --force
npm install

For Windows PowerShell

Remove-Item -Recurse -Force .next, node_modules, package-lock.json
npm cache clean --force
npm install

Then run again

npm run build

Answer 14

For Yarn users

yarn build

yarn start

should achieve the same thing as npm run build

Answer 15

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