Nx: Error on Vercel Nextjs deploy

[cenguidanos]

Current Behavior

Deploy Nextjs monorepo gets an error

Steps to Reproduce

1. Create nx workspace with Nextjs preset.
2. Go to Vercel account.
3. Import repository.
4. Modify default commands on Vercel:

Build command: nx build <app>
Directory: dist/apps/<app>

Failure Logs

Error: A "routes-manifest.json" couldn't be found. This is normally caused by a misconfiguration in your project.
Please check the following, and reach out to support if you cannot resolve the problem:
1. If present, be sure your `build` script in "package.json" calls `next build`.  2. Navigate to your project's settings in the Vercel dashboard, and verify that the "Build Command" is not overridden, or that it calls `next build`.  3. Navigate to your project's settings in the Vercel dashboard, and verify that the "Output Directory" is not overridden. Note that `next export` does **not** require you change this setting, even if you customize the `next export` output directory. Learn More: https://err.sh/vercel/vercel/now-next-routes-manifest

Environment

@nrwl/cli: 10.3.2
@nrwl/next: 10.3.2
next: 10.0.1
typescript: 4.0.3

[mandarini]

Hi there @cenguidanos !

Thanks for filing an issue!

You can solve this issue by choosing "Framework preset: Other"

Take a look at this issue and this comment here.

Let me know if you need any more assistance, or I can close this issue!

[cenguidanos]

Maybe this help works with only SSG mode, but if you use SSR or lamba pages, you get this:

Thanks

[mandarini]

Hi @cenguidanos , this is what I see as well when deploying the next.js app on Vercel. So, I assume that since you see the same screen, that it works, and deployed correctly?

[cenguidanos]

Hi @mandarini , thanks for your response but correctly correctly... It's deployed but the webpage don't works and we see a system folder. It's not the point of this. Maybe i don't explain my self very well with english. Sorry. Our interest is deploy a @nrwl/next app in Vercel like normal next.js repo with all opimizations, it's possible for now with nx? Thanks.

[mandarini]

Hi there @cenguidanos ! Sorry, you're right, your request makes sense! I'll take a look on this next week! In the meantime, I would suggest you can try some different output directories or configurations on Vercel?

[cenguidanos]

On local, or other nodejs platforms, we can do this:

1. Add new script to package.json:

{
"scripts": {
    "nx": "nx",
    "next": "next", <---
    "start": "nx serve",
    "build": "nx build",
    "test": "nx test",
    "lint": "nx workspace-lint && nx lint",
    "e2e": "nx e2e",
    "affected:apps": "nx affected:apps",
    "affected:libs": "nx affected:libs",
    "affected:build": "nx affected:build",
    "affected:e2e": "nx affected:e2e",
    "affected:test": "nx affected:test",
    "affected:lint": "nx affected:lint",
    "affected:dep-graph": "nx affected:dep-graph",
    "affected": "nx affected",
    "format": "nx format:write",
    "format:write": "nx format:write",
    "format:check": "nx format:check",
    "update": "nx migrate latest",
    "workspace-schematic": "nx workspace-schematic",
    "dep-graph": "nx dep-graph",
    "help": "nx help"
  },
}

2. Build app with nx build <app>.

3. Serve app with next yarn next dist/apps/<app>.

And works fine:

yarn run v1.22.5
$ next start dist/apps/<app>
ready - started server on http://localhost:3000

Anyway, this don't works with Vercel Hosting, but yes with docker, for example.

[gregkonush]

I can confirm this issue as well, my standalone nextjs app was deployed successfully to the vercel, but when I converted it to be part of monorepo setup of nx then builds were failing and deployed correctly

[cenguidanos]

Vercel Support Twitter send me this: https://twitter.com/vercel_support/status/1325770048934465537?s=20

Hello Cristian,

We don't support NX-powered apps at the moment. Our team is working on making this feature available for you shortly, and we should get back to you once we support NX.

[gregkonush]

I wonder if you can customize NX builder to customize the Next commands that NX is running under the hood.

[cenguidanos]

I don't know how to do it. Now we are in Render.com with a simple nodejs server, but is not serverless...

[gregkonush]

@cenguidanos I figured the way it works. So for root of application settings you choose the app folder like apps/dashboard and then you leave nextjs as framework option and all other things leave as default. Then I created separate package.json file specifically for that in its app's folder(apps/dashboard) that has this:

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

[cenguidanos]

From Vercel team:

https://twitter.com/paulogdm/status/1326849234176516102?s=19

[cenguidanos]

Ok, the solution is change the workspace.json and modify outputPath to:

{
  "version": 1,
  "projects": {
    "home": {
      "root": "apps/<app>",
      "sourceRoot": "apps/<app>",
      "projectType": "application",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@nrwl/next:build",
          "options": {
            "root": "apps/home",
            "outputPath": "." <--
          }

And apply Next.js Vercel builder on deploy process.

[gregkonush]

I am not sure why this closed. I followed the steps that you provided and I don't think that works?

[cenguidanos]

You can't? An alternative to modify workspace.json is create a build command on package.json: "build:app": "nx build app --outputPath . and override build command on Vercel. This works for me. Leo Lamprecht, dev on Vercel, says that they are working with optimizarions for NX workspaces. But, for now, he says that this is the solution.

[JamesHenry]

In my view this is the most optimal Nx + Next.js + Vercel setup that is available today: https://github.com/nrwl/nx/issues/3051#issuecomment-737482131