`npm run build` is not working in Next.js 14

Question

Issue with Next.js Build: "next: not found" on Deployment Server

Description:

I'm encountering an issue with my Next.js project during the build process. The logs during the local build and the deployment server are shown below.

Local Build Logs:

$ next build

   ▲ Next.js 14.1.0

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
 ✓ Collecting page data
 ✓ Generating static pages (5/5)
 ✓ Collecting build traces
 ✓ Finalizing page optimization

Route (app)                              Size     First Load JS
┌ ○ /                                    76.3 kB         160 kB
└ ○ /_not-found                          882 B          85.1 kB
+ First Load JS shared by all            84.2 kB
  ├ chunks/69-28f79be715c06873.js        28.9 kB
  ├ chunks/fd9d1056-f6b668df0b3d2561.js  53.4 kB
  └ other shared chunks (total)          1.96 kB


○  (Static)  prerendered as static content

The above output suggests that the build is successful locally.

Deployment Server Error:

Run (npm run build)

  shell: /usr/bin/bash -e ***0***

> [email protected] build
> next build

sh: 1: next: not found
Error: Process completed with exit code 127.

On the deployment server, I'm encountering an issue where next is not recognized. The build fails with an exit code 127

Things I've Tried:

1. Deleted node_modules, cleaned npm cache and reinstalled -> npm i
2. Deleted next and reinstalled -> npm i next
3. Added cross-env -> npm i cross-env
4. Added dependency -> "dev": "cross-env NODE_OPTIONS='--inspect' next dev"

Package.json:

    {
  "name": "personal-portfolio",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@tabler/icons-react": "^2.47.0",
    "@tsparticles/engine": "^3.2.1",
    "@tsparticles/react": "^3.0.0",
    "@tsparticles/slim": "^3.2.1",
    "classnames": "^2.5.1",
    "clsx": "^2.1.0",
    "cross-env": "^7.0.3",
    "framer-motion": "^11.0.5",
    "next": "^14.1.0",
    "react": "^18",
    "react-dom": "^18",
    "react-element-to-jsx-string": "^15.0.0",
    "react-hot-toast": "^2.4.1",
    "react-icons": "^5.0.1",
    "react-player": "^2.14.1",
    "sonner": "^1.4.0",
    "tailwind-merge": "^2.2.1",
    "tsparticles-engine": "^2.12.0"
  },
  "devDependencies": {
    "@types/node": "20.11.18",
    "@types/react": "18.2.55",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.0",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.3.3"
  }
}

Any insights or guidance on resolving this issue would be greatly appreciated. Thank you!

Answer 1

You are getting "next: not found" on deployment server because the command npm install was not executed on the deployment server and the dependencies were not installed there. Whereas, the build command is successful on the local system since the dependencies are already available there.

To fix this, replace the below line in package.json

"build": "next build",

with

"build": "npm i && next build",

This will ensure that npm i (install) command gets executed on the deployment server whenever you deploy new changes.