Unexpected behavior with next build executor and outputPath. Resulting in vercel deployment error: "routes-manifest.json couldn't be found"

[mxa0079]

Current Behavior

When my Next's project configuration points to an output path in the dist folder at the root of the monorepo I end up with part of my build output in the correct dist folder (the nx part) and the other part (the next.js files, the actual applization) ends up in the .next folder within my project.

The command I am using is: npx nx build dora-whitelabel-web-app --prod --verbose --skip-nx-cache

Here is my project.json:

{
  "name": "dora-whitelabel-web-app",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/dora-whitelabel-web-app",
  "projectType": "application",
  "tags": [],
  "targets": {
    "build": {
      "executor": "@nx/next:build",
      "outputs": [
        "{options.outputPath}",
        "{options.outputPath}/.next/**",
        "!{options.outputPath}/.next/cache/**"
      ],
      "defaultConfiguration": "production",
      "options": {
        "outputPath": "dist/apps/dora-whitelabel-web-app"
      },
      "configurations": {
        "development": {
          "outputPath": "dist/apps/dora-whitelabel-web-app/"
        },
        "production": {
          "outputPath": "dist/apps/dora-whitelabel-web-app/"
        }
      }
    },
    "serve": {
      "executor": "@nx/next:server",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "dora-whitelabel-web-app:build",
        "dev": true
      },
      "configurations": {
        "development": {
          "buildTarget": "dora-whitelabel-web-app:build:development",
          "dev": true
        },
        "production": {
          "buildTarget": "dora-whitelabel-web-app:build:production",
          "dev": false
        }
      }
    },
    "export": {
      "executor": "@nx/next:export",
      "options": {
        "buildTarget": "dora-whitelabel-web-app:build:production"
      }
    },
    "test": {
      "executor": "@nx/jest:jest",
      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
      "options": {
        "jestConfig": "apps/dora-whitelabel-web-app/jest.config.ts"
      }
    },
    "lint": {
      "executor": "@nx/eslint:lint",
      "outputs": ["{options.outputFile}"]
    }
  }
}

And the output folders look like this:

The project's folder:

The dist folder:

As a result of this my deployments to Vercel using the CLI are failing with the error:

Error: The file "/vercel/path0/dist/apps/dora-whitelabel-web-app/.next/routes-manifest.json" couldn't be found. This is often caused by a misconfiguration in your project.

Solution:

point the output path to the .next file inside the project:

{
  "name": "dora-whitelabel-web-app",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "apps/dora-whitelabel-web-app",
  "projectType": "application",
  "tags": [],
  "targets": {
    "build": {
      "executor": "@nx/next:build",
      "outputs": [
        "{options.outputPath}",
        "{options.outputPath}/.next/**",
        "!{options.outputPath}/.next/cache/**"
      ],
      "defaultConfiguration": "production",
      "options": {
        "outputPath": "dist/apps/dora-whitelabel-web-app"
      },
      "configurations": {
        "development": {
          "outputPath": "apps/dora-whitelabel-web-app/.next" 
        },
        "production": {
          "outputPath": "apps/dora-whitelabel-web-app/.next" //NOTICE HERE I AM POINTING TO THE .NEXT FILE INSIDE THE PROJECT. THIS WAY THE NX AND THE NEXT FILESS END UP IN THE SAME LOCATION
        }
      }
    },
    "serve": {
      "executor": "@nx/next:server",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "dora-whitelabel-web-app:build",
        "dev": true
      },
      "configurations": {
        "development": {
          "buildTarget": "dora-whitelabel-web-app:build:development",
          "dev": true
        },
        "production": {
          "buildTarget": "dora-whitelabel-web-app:build:production",
          "dev": false
        }
      }
    },
    "export": {
      "executor": "@nx/next:export",
      "options": {
        "buildTarget": "dora-whitelabel-web-app:build:production"
      }
    },
    "test": {
      "executor": "@nx/jest:jest",
      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
      "options": {
        "jestConfig": "apps/dora-whitelabel-web-app/jest.config.ts"
      }
    },
    "lint": {
      "executor": "@nx/eslint:lint",
      "outputs": ["{options.outputFile}"]
    }
  }
}

Expected Behavior

The output of the build (all of it, NX and Next.js files) should be dropped in the location specified in the outputPath of the project.json

GitHub Repo

No response

Steps to Reproduce

1. Create a Next project
2. Ensure the outputPath in the project.json points to a folder in the dist file
3. Build the app using nx "npx nx build dora-whitelabel-web-app --prod --verbose --skip-nx-cache "
4. Notice how the .next files are created in the .next folder inside of the project and not in the dist folder specified in the outputPath of the project.json

Nx Report

nx report

 NX   @nx-dotnet/core is a v1 plugin.

Nx has recently released a v2 model for project graph plugins. The `processProjectGraph` method is deprecated. Plugins should use some combination of `createNodes` and `createDependencies` instead.


 NX   @nx-dotnet/core is a v1 plugin.

Nx has recently released a v2 model for project graph plugins. The `processProjectGraph` method is deprecated. Plugins should use some combination of `createNodes` and `createDependencies` instead.


 NX   Report complete - copy this into the issue template

Node   : 21.6.2
OS     : darwin-arm64
yarn   : 1.22.21

nx                 : 18.3.2
@nx/js             : 18.3.2
@nx/jest           : 18.3.2
@nx/linter         : 18.3.2
@nx/eslint         : 18.3.2
@nx/workspace      : 18.3.2
@nx/cypress        : 18.3.2
@nx/devkit         : 18.3.2
@nrwl/devkit       : 15.8.5
@nx/eslint-plugin  : 18.3.2
@nx/next           : 18.3.2
@nx/react          : 18.3.2
@nrwl/tao          : 18.3.2
@nx/web            : 18.3.2
@nx/webpack        : 18.3.2
typescript         : 5.4.5
---------------------------------------
Registered Plugins:
@nx-dotnet/core
---------------------------------------
Community plugins:
@nx-dotnet/core : 1.23.0
---------------------------------------
The following packages should match the installed version of nx
  - @nrwl/devkit@15.8.5

To fix this, run `nx migrate nx@18.3.2`

Failure Logs

No response

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

As a bonus: it seems like the nx cache is not working inside vercel even though in there i do not have the --skip-nx-cache flag.

[mxa0079]

FWIW, there is someine in the Discord forum also running into this issue.

[ndcunningham]

After you made your changes to project.json
Can you delete your dist/apps/dora-whitelabel-web-app/ and your apps/dora-whitelabel-web-app/.next folders and re-run your build. It should only generate artifacts at specified path based on your configuration.

Meaning only inside apps/dora-whitelabel-web-app/.next

[mxa0079]

Tried that multiple times without success. The build output continues to be split between dist/apps/dora-whitelabel-web-app/ for NX related files and apps/dora-whitelabel-web-app/.next for next related

[mxa0079]

Update TLDR

New projects (generated with NX V14). are unable to reproduce the behavior described in this issue. However, my original Next.js project which was generated with and older version of NX does exhibit the problem described in this issue.

Detailed update

Here is an update on this whole saga.

Some context - the dora-whitelabl-web-app has existed since the NX version that used workspace.json. Hence it has gone through many migrations.

Second - this week we added a brand new Next.js project.

When configuring our CI/CD I replicated the configuration that worked in dora-whitelabl-web-app (see issue description. TLDR: setting the output to a .next folder within the project, instead of the dist folder. Something like: apps/new-app/.next). This configuration failed:

• The output of the build ended up in a double nested .next folder (i.e. apps/new-app/.next/.next/ as opposed to the apps/new-app/.next folder. However, in the original project this same configuration generates the output in apps/dora-whitelabel-web-app/.next - see screenshot in issue description).
• To avoid the double nested problem, I configured the output folder to only apps/new-app/. However, when I did this a package.json file was being generated within my project (apps/new-app/package.json).

My first instinct was to set the generatePackageJson option to false in my project.json (which seemed weird as I am using an integrated repo). This of course failed, as this option had nothing to do with my problem.

Solution to this new problem

Finally, I realized the package.json was part of the build output. So I configured the output of the new-app project to the dist folder in the root of the monorepo. This worked! For this project both the nx and the .next files do end up in the correct location.

However, the original dora-whitelabel-web-app continues to exhibit the behavior described in this issue when I set the output to the dist folder (NX filed in the dist folder and .next files in the project folder).