How to integrate @next/bundle-analyzer within a nx workspace?

[mcmxcdev]

I am trying to integrate https://www.npmjs.com/package/@next/bundle-analyzer into a next.js app as part of a nx workspace.

The dependency recommends toggling the analyzer based on process.env.ANALYZE env flag which is enabled in a npm script in package.json.

With our nx setup, we don't have any package.json files (only project.json) except for the root one and would like to keep it that way.

Is there any way to have the @nrwl/next:build executor support setting an env like process.env.ANALYZE to make this work?

We are also missing a way to reuse an existing executor target e.g. build and just reuse it like npm scripts as build:analyze

[Boo-urns]

@mcmxcdev I was able to get @next/bundle-analyzer to work but I had to manually set the env value in my .env.local

[mcmxcdev]

Yeah thats a good idea, I ended up just adding it to the command like e.g. ANALYZE=true nx build xyz

[Boo-urns]

Ah excellent that is now working for me. ANALYZE=true nx build appname
It wasn't working when i was setting it up.

[paulmuenzner]

Hello,
how did you actually implement it in NX together with module.exports = withNx(nextConfig); ?
Could you please provide code snippets?
I tried out many options but always receive error messages during build. For example I trie:

• module.exports = withNx( withBundleAnalyzer({ // Next.js configuration options // ... }) );

• module.exports = withNx(nextConfig).withBundleAnalyzer({ enabled: process.env.ANALYZE === 'true', });

• module.exports = withNx({ // Next.js configuration options // ... })(withBundleAnalyzer);

• module.exports = withNx({ // Next.js configuration options // ... }).withBundleAnalyzer({ enabled: process.env.ANALYZE === 'true', });

This are just some examples. Each I also tried with future: { webpack5: true, // Enable webpack 5 },. Still, no success story at all.
Could you please provide code snippets?

[mcmxcdev]

It depends on the nx and next versions that you use, but we currently use it like this:

const plugins = [withNx, withAxiom];

if (process.env.ANALYZE === 'true') {
  plugins.push(withBundleAnalyzer);
}

const withPlugins = composePlugins(...plugins)(nextConfig);

[paulmuenzner]

Thank you for the quick response! This is an approach I did not try so far.
I guess you use next-compose-plugins?

In the end you export it like module.exports = withPlugins?

I use following versions:

• Nx version: is 16.1.0.
• Nextjs version: 12.xxx
• Node: 18.15.0

[mcmxcdev]

We don't use next-compose-plugins and nx advises against using it. That's why they introduced composePlugins method recently.

We are still adding some more plugins after withPlugins, in your case you can just do:
module.exports = composePlugins(...plugins)(nextConfig);

[victorcarvalhosp]

Can you please share the entire file?

[kgrigor]

for @victorcarvalhosp and whoever ends up here trying to figure this out:

const plugins = [
  withNx,
];

const composedConfig = composePlugins(...plugins)(nextConfig);

module.exports = withBundleAnalyzer({
  enabled: process.env.ANALYZE === 'true',
})(composedConfig);

This is how I got it working. I am using [email protected] with [email protected] and @next/[email protected]. Hope this helps.

[jchatrny]

You can use nx: run-commands to wrap any of your scripts and add variables

        "bundle-analyzer": {
          "executor": "nx:run-commands",
          "options": {
            "command": "ANALYZE=true nx build myapp --prod"
          }
        }

And run it simply like nx bundle-analyzer myapp

[darkopetrovic]

When using next.config.mjs we can enable the analyzer like this:

import withBundleAnalyzer from '@next/bundle-analyzer'

if (process.env.ANALYZE === 'true') {
  plugins.push(withBundleAnalyzer({ enable: true }))
}