How to configure Next.js plugins

Next.js applications generated by Nx use a plain next.config.js file. You configure Next.js options and compose other Next.js plugins directly, the same way you would outside a monorepo.

next.config.js

//@ts-check

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Next.js options go here
  // See: https://nextjs.org/docs/app/api-reference/config/next-config-js
};

module.exports = nextConfig;

withNx and composePlugins are deprecated

The withNx and composePlugins helpers from @nx/next are deprecated and will be removed in Nx v24. Existing applications keep working until then. Follow the steps below to migrate to a plain next.config.js.

Workspace libraries

The main job withNx did was make sure imported workspace libraries were transpiled by Next.js. You no longer need withNx for this. Next.js transpiles workspace library source automatically on both Turbopack and webpack, so a plain next.config.js works with no extra configuration.

If you hit an "untranspiled dependency" error from a package, add it to Next's transpilePackages option:

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@myorg/ui'],
};

module.exports = nextConfig;

Composing other plugins

composePlugins is no longer required. Compose Next.js plugins by calling them directly in next.config.js. For example, with @next/mdx:

next.config.js

const withMDX = require('@next/mdx')();

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Next.js options go here
};

module.exports = withMDX(nextConfig);

Each plugin wraps the next, so you can nest as many as you need: withA(withB(nextConfig)).

Migrating from withNx

Replace the wrapped config with a plain object and remove the @nx/next import.

This assumes you use the inferred @nx/next/plugin (the default for new apps). If your project still uses the legacy @nx/next:build executor, run nx g @nx/next:convert-to-inferred first, since that executor relies on withNx to honor --outputPath.

Before:

next.config.js

const { composePlugins, withNx } = require('@nx/next');

const nextConfig = {
  nx: {},
};

module.exports = composePlugins(withNx)(nextConfig);

After:

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Next.js options go here
};

module.exports = nextConfig;

If your application set options under nx: {} in withNx, configure them yourself after migrating:

• nx.babelUpwardRootMode. Set babel rootMode: 'upward' in your own babel config if you need per-library .babelrc files to be picked up. See the babel rootMode docs.
• nx.fileReplacements and nx.assets. Configure these through your build setup directly.
• SVGR. Configure SVGR in next.config.js without Nx. See the SVGR Next.js guide.