NextJs vercel deployment error "routes-manifest.json" couldn't be found

Question

My nextjs app was working properly I added some files to update my code now it is not deploying my app on vercel. gives this error

I tried googling the error but my case in unique.

This is the git repo https://github.com/usman-174/google-calendar-frontend

These are my script tags from package.json

 "scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"export": "next export",
"lint": "next lint",
"lint-fix": "next lint --fix"
},

next.config.js

module.exports = {
distDir: 'build',
}

Answer 1

Assuming that you're using turbo with pnpm

1. Verify your package names in package.json files

Imagine you have a structure like this:

root/
├─ apps/
│  ├─ web/
├─ packages/
│  ├─ tsconfig/

And this is your pnpm-workspace.yaml file:

packages:
  - "apps/*"
  - "packages/*"

Then you have to make sure that name field in package.json file in your web project is representing web as well, like so:

{
    "name": "web",
    "scripts": {
        "dev": "next dev",
        "build": "next build",
    },
    // ...
}

2. Double-check your root package.json and turbo.json files

A minimal root package.json in a turborepo project:

{
    "scripts": {
        "build": "turbo run build",
        "dev": "turbo run dev",
    },
    "devDependencies": {
        "turbo": "^1.8.3"
    },
    "packageManager": "pnpm@7.15.0"
}

And the turbo.json file at the root:

{
    "$schema": "https://turbo.build/schema.json",
    "pipeline": {
        "build": {
            "dependsOn": ["^build"],
            "outputs": [".next/**", "!.next/cache/**"]
        },
        "dev": {
            "cache": false,
        }
    }
}

3. Check your build and install commands in Vercel UI

Go to Settings -> General tab in your project in Vercel UI and verify commands:

The build command should be:

cd ../../ && pnpm run build --filter=web...

And install command (assuming that you're using pnpm)

pnpm install

4. Check "Root Directory" in Vercel UI

Go to Settings -> General tab in your project in Vercel UI and verify the project path:

Verify that it's representing your next.js project path: apps\web

Answer 2

Overriding the build folder fixed my issue.

Answer 3

I also ran into this error because the root directory of my app was not in the top-level directory of my Git repository, so Vercel was unable to find the .next folder.

I fixed it by going to the Vercel dashboard for my Vercel project, then -> Settings -> General and setting Root Directory to the subdirectory path to my application:

Answer 4

Issue was we were using 'latest' in package.json for next version. I fixed it to previous version of nextjs which is 12.3.1 for us seems to have fixed the deployment for now.

But still waiting for vercel support for best way to update nextjs version in deployment for vercel or is it some sort of bug their end.

Answer 5

1. Run npm run build (check all files in builded folder)
2. Create .next folder and move all files from build folder to .next
3. Commit your .next folder to vercel or maybe git.

Answer 6

In my case, make sure please if the folder within the project is called "web", the json name inside should be "web"!

Answer 7

In my case I had a few errors in my files

Error: `'` can be escaped with `'`, `‘`, `'`, `’`.  react/no-unescaped-entities

Which were being hidden in the Vercel build log because I forgot I had the following in next.config.js

eslint: {
  ignoreDuringBuilds: true,
}

Which just showed me the error you have instead of the actual reason it failed.

Enabling eslint indirectly solved my issue as it led me to find the real error.

Answer 8

I was getting same error in case for nx intergrated app. I changed the settings in the vercel project and then it worked

These were the settings that worked