Deploying NextJS apps with a monorepo (nx)

Support
1

Hi,

I’m trying to deploy apps using netlify with my monorepo built with nx.
Here are the steps I did for deployment:

  1. created netlify.toml file inside of apps/landing 
 [build]
  command = "npm run build"
  publish = "apps/landing/out"

[dev]
  command = "npm run start"
  targetPort = 4200

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

  1. using netlify UI, add apps/landing as base directory

  2. modifying the apps/landing/next.config.js file according to https://github.com/netlify/netlify-plugin-nextjs/blob/main/docs/monorepos.md#nx

// eslint-disable-next-line @typescript-eslint/no-var-requires
const withNx = require('@nrwl/next/plugins/with-nx');

/**
 * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = {
  nx: {
    // Set this to true if you would like to to use SVGR
    // See: https://github.com/gregberge/svgr
    svgr: false,
  },
  distDir: '.dist',
  target: 'serverless',
};

module.exports = withNx(nextConfig);

However, and I push, I got the following error:

Capture
Capture1324×117 9.1 KB

Note: it did not happened when netlify.toml was at the root of the monorepo. I moved it to apps/landing because I’ve got several apps and figured I would add this file and modify the publish directory for each apps according to Monorepos | Netlify Docs

Reading further, I believe this is an issue due to the fact that there is no package.json in apps/landing so the runner doesnt resolves dependencies. How should I proceed to make that work with NX?

Thanks

2

Another solution that could work would be to keep the netlify.toml file at root and dynamically change the publish path, probably using env variables. But I’m not sure how to do so?

3

Hi @GreatHawkeye,

If you could share the repo, it can give a clear picture of your file structure.

Additionally, it would help if you can show your file-structure if sharing a repo is not possible.

About this, the publish path should be out if you’ve set the base path as apps/landing: the publish path is relative to the base path.

4

Hi @hrishikesh ,

Here’s the file structure:

org/
  apps/
    landing/
      next.config.js
      netlify.toml
    other-app/
  libs/
    ...
  package.json
5

I’ve actually make it work by:

  1. removing netlify.toml files completely
  2. keeping the next.config.js file for nextjs apps
  3. in the netlify UI, I added nx run landing:build for the build command
  4. in the netlify UI, I removed the Base directory setting
  5. in the netlify UI, I added apps/landing/out as Publish directory
  6. adding essential nextjs plugins to my nextjs apps

And it works like a charm!

1 Like
6

Hey there, @GreatHawkeye :wave:

Glad to hear this is working now :netliconfetti: Additionally, thanks for following up with the detailed steps. This will definitely be beneficial for future Forums members who encounter something similar!

7

Hey @GreatHawkeye, what do you mean by your sixth step, “adding essential nextjs plugins to my nextjs apps”? Did you figure out a way to have a netlify.toml for each of your apps instead of one at the root?

8

You can have multiple netlify.tomls easily. You simply need to set the base path in the UI and not set any base path in netlify.toml and that would do.