How to deploy Next.js app and a static React app from an Nx monorepo

Support
, ,
1

Hey there,

My team has a monorepo manage with Nx. We have two apps that we’re trying to deploy on Netlify as two separate sites. One app is a static, client-rendered React application; the other is a new Next.js app using Next.js v12. I’m having trouble figuring out how to setup continuous deployment for both of them.

We have our monorepo setup as such:

/
  netlify.toml
  package.json
  apps/
    my-nextjs-app/
      next.config.js
    my-react-app/
  libs/
    shared-lib-between-the-apps/

In the netlify.toml we have:

[[plugins]]
package = "@netlify/plugin-nextjs"

We’re using the beta v4 Essential Next.js plugin, as specified in our package.json

"scripts": {
  "serve": "nx serve",
  "build": "nx build",
},
...
"devDependencies": {
  "@netlify/plugin-nextjs": "^4.0.0-beta.6",
  ...
  "nx": "^13.1.3",
  ...
}

On our Netlify site for the Next.js app, we specify our build command as yarn nx build my-nextjs-app and the publish directory as dist/apps/my-nextjs-app/.next. This works and deploys that site just fine.

The problem I have reveals itself when deploying the other site, the one that isn’t a Next.js app. On that one, the build command is set as yarn nx build my-react-app and the publish directory as dist/apps/my-react-app. Its build process simply spits out a bunch of static files and relies on client-side routing. When Netlify goes to deploy that, it fails because the Next.js build plugin expects a Next.js build:

3:44:07 PM: ────────────────────────────────────────────────────────────────
3:44:07 PM:   Plugin "@netlify/plugin-nextjs" failed                        
3:44:07 PM: ────────────────────────────────────────────────────────────────
3:44:07 PM: ​
3:44:07 PM:   Error message
3:44:07 PM:   Error: The directory "dist/apps/my-react-app" does not contain a Next.js production build. Perhaps the build command was not run, or you specified the wrong publish directory.

How can I resolve this? Can I have app-specific netlify.toml files somehow? Or is there something else I could to do workaround the issue?

Thanks in advance for your help!

2

Good news! I tried removing the Next.js plugin from the netlify.toml file, the package = "@netlify/plugin-nextjs" line, and that solved the problem! Both apps deploy correctly. Netlify knew to use that plugin for the Next.js app, and was able to since it was an installed dependency, and knew not to use it for the client-side React app.

I’m not sure what it’s using as the signal that a build will be a Next.js app (maybe the .next publish directory?), but I’m glad it just works :slight_smile:

3

Turns out this wasn’t actually solved; my conclusion was a bit premature. The problem still exists; it only appeared to not exist when I still had a separate package.json file for the React app. The end-state I’m trying to achieve though is having one package.json for the whole repo.

I’ve made an isolated reproduction of the issue in this repo. It was generated with the basic Nx commands:

npx create-nx-workspace --name=my-org --preset=next --appName=my-next-app --style=css --nx-cloud=false
cd my-org
npx nx g @nrwl/react:app my-react-app --style=css --routing=false

The repo has one package.json in the root directory, and two apps — apps/my-next-app and apps/my-react-app. I want to deploy both of these on Netlify; I have a site setup for each of them.

Here’s the deploy settings for the Next.js site:
Base directory Not set
Build command npm run build -- my-next-app
Publish directory dist/apps/my-next-app/.next

And here’s the deploy settings for the React site:
Base directory Not set
Build command npm run build -- my-react-app
Publish directory dist/apps/my-react-app

The Next.js app builds and deploys no problem. The problem arises when building and deploying the React app. It tries to use @netlify/plugin-nextjs (I’m assuming because it sees next is a dependency in package.json) and then errors out when it doesn’t see a Next.js production build in dist/apps/my-react-app. It doesn’t matter what I set as my base directory.

How can I workaround this? Is there someone I can tell the React app’s site not to use the Next.js build plugin? Creating a package.json for each app is not an option for me.

This happens whether or not I have @netlify/plugin-nextjs in my devDependencies, and on both v3 and v4 beta of that plugin.

4

I figured out part of the solution. On the first build of my-react-app Netlify auto-installs the Next.js plugin, but after going into the Plugins section of the site and uninstalling the plugin, it won’t reinstall itself and the build works. Both sites build and deploy :+1:

But, there’s still another problem. I want to specify a netlify.toml for each site. I’ve put a netlify.toml in each apps directory (apps/my-react-app/netlify.toml, apps/my-next-app/netlify.toml), and set the base directory to that from the Netlify UI. Each site’s Build settings in the Netlify UI consist solely of setting the base directory to apps/my-next-app and apps/my-react-app, respectively. Build command and publish directory are not set; they’re configured through the netlify.toml files.

The build for my-react-app fails with the error Command "nx" not found, even though it’s listed in the dependencies in the root package.json. And the build for my-next-app fails with the error:

Error while installing dependencies in /opt/build/repo/apps/my-next-app/.netlify/plugins/
8:36:50 PM:   npm ERR! code ETARGET
8:36:50 PM:   npm ERR! notarget No matching version found for @netlify/plugin-nextjs@4.
8:36:50 PM:   npm ERR! notarget In most cases you or one of your dependencies are requesting
8:36:50 PM:   npm ERR! notarget a package version that doesn't exist.

It seems like the root cause is that Netlify’s not finding the node_modules directory? Any guidance on fixing this?

6

Hi @Lou,

So sorry to leave you struggling on this alone, I’m not sure how I missed this 12 day old thread, but we’re here now. I can see that you’ve already managed to open a new thread and got some responses there.

Let’s continue the discussion there now.

1 Like
7

Hey @hrishikesh, no worries. Yep, started this thread to be a little more specific about the problem. Haven’t totally solved the problem yet, so anything you can contribute is greatly appreciated!

1 Like