Possible to use in a Nx monorepo?

[thallada]

I have a Nx monorepo consisting of:

web/
├── apps/
│   ├── app1/
│   │   ├── pages/
│   │   ├── tsconfig.json
│   │   ├── next.config.json
│   │   └── .babelrc
│   ├── app2/
│   │   ├── pages/
│   │   ├── tsconfig.json
│   │   ├── next.config.json
│   │   └── .babelrc
├── libs/
│   ├── common/
│   │   ├── components/
│   │   ├── index.ts
├── workspace.json
├── nx.json
├── package.json
├── tools/
├── tsconfig.base.json
└── .eslintrc.json

app1 and app2 use common components exported from the common lib. Everything is in typescript.

Building and serving one of the apps with nx is done with nx commands instead of the next.js commands. E.g.: nx build app1 and nx serve app1.

It seems like this terraform module assumes there is a single next.js app without any external dependencies in a sibling folder and that there is a package.json in the next.js app folder instead of a single shared package.json at the monorepo root, which is how Nx structures things. There doesn't seem to be a way to force the module to use the nx build commands instead of the normal next.js build commands.

Is it possible to use this terraform module with my app structure? It's okay if it's only possible to deploy one of the next.js apps (e.g. app1) at a time.

[ofhouse]

Hi, what normally happens when you run tf-next build is that it copies most of the directory into a temporary folder and then builds it inside the temporary folder. This can break some more complex monorepo setups like yours.

Since we also use it in a more complex monorepo setup we have added the --skipDownload flag which prevents the copying into the temporary directory and builds it in place instead. So what I think would work for you is executing npx tf-next build --skipDownload inside the web/apps/app1 package and web/apps/app2 directories.

tf-next can somehow only build one app the the time, so for this setup you have to build both apps separately as mentioned above.

[thallada]

Just following up on this, I ended up removing Nx because it was causing a lot of issues with terraform. Instead, I went with the monorepo structure suggested in https://github.com/martpie/monorepo-typescript-next-the-sane-way where each sub app has it's own package.json. Since the normal next build command works with this structure, using this terraform module tf-next build works okay (I just needed to add the --skipDownload flag like you suggested, thanks).

[ofhouse]

Thanks for the update 👍 Yes, we found some issues in the current monorepo support, so there will be an update on this soon. You can follow #93 for more information.

[olivark]

Hi there,

sorry to resurrect this issue :-)

It would be great to have this also working with nx monorepo. Not sure if the last comment suggested the opposite.

Thanks for this great tool too!

[ofhouse]

@olivark Ah, I thought that the problem with nx was also fixed with #93. Never worked with nx, is it using yarn under the hood (like Lerna does) or is it using it's own package manager?

Need to take a closer look at an Next.js + nx example, if you know know one I would appreciate if could drop me a link :)

[olivark]

@ofhouse I ended up learning terraform. Now I can deploy to aws and serve my app via cloudfront+s3.

Also I quickly created this (nx, nextjs, terraform-aws-next-js, change package.json and add main.tf) https://github.com/olivark/nx-nextjs.git

Just run yarn or npm install then yarn tf-next

you should get this:

Build failed:
NowBuildError: 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.
    at Object.getRoutesManifest (/Users/kolivar/src/happynrwl/node_modules/@dealmore/tf-next-runtime/dist/index.js:38096:15)
    at async Object.build (/Users/kolivar/src/happynrwl/node_modules/@dealmore/tf-next-runtime/dist/index.js:36062:28)
    at async Object.buildCommand [as default] (/Users/kolivar/src/happynrwl/node_modules/tf-next/dist/commands/build.js:136:29) {
  hideStackTrace: true,
  code: 'NEXT_NO_ROUTES_MANIFEST',
  link: 'https://err.sh/vercel/vercel/now-next-routes-manifest',
  action: undefined

I tried with --skipDownload and did not work either. Maybe there is a way to force nx to run next build instead of nx build somehow.

Anyway, thanks!

[Stralos]

Hey @ofhouse, I'm currently in the same boat( I want to use tf-next with Nx js mono repo strucure).

Is there a way I could help you with this ticket ?

@olivark Ah, I thought that the problem with nx was also fixed with #93. Never worked with nx, is it using yarn under the hood (like Lerna does) or is it using it's own package manager?

Need to take a closer look at an Next.js + nx example, if you know know one I would appreciate if could drop me a link :)

Regardint this question it uses what ever package manager you tell it to use (npm or yarn). It uses npm by default.

[PodStuart]

I think I found a way to get this module working with a Nx monorepo, though it is a bit of a hack.

By adding the following target to my project.json file it becomes possible to run nx package and the deployment.zip file gets built as expected.

"package":{
   "executor":"nx:run-commands",
   "options":{
      "commands":[
         "npx tf-next build --skipDownload",
         "rm package.json",
         "rm package-lock.json",
         "mv next.config.__vercel_builder_backup__.js next.config.js"
      ],
      "cwd":"apps/example-next-app",
      "parallel":false
   }
}

It is necessary to add the skip download flag or you get a NEXT_NO_VERSION error which I guess is just because the package.json file isn't at the root of the app but at the top of the monorepo. It's then necessary to cleanup the changes that the build command makes to your repository so you don't accidentally commit.