next.config.js

Next.js can be configured through a next.config.js file in the root of your project directory.

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

module.exports = nextConfig;

Note: next.config.mjs is also supported if you prefer ES Modules.

This page documents the configuration options specific to the /app directory. For a full list of all available options, please view the next.config.js (stable) documentation.

Experimental

Stable

appDir

The App Router (app directory) enables support for layouts, Server Components, streaming, and colocated data fetching.

Using the app directory will automatically enable React Strict Mode. Learn how to incrementally adopt app.

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
};

module.exports = nextConfig;

mdxRs

For use with @next/mdx. Compile MDX files using the new Rust compiler.

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

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['ts', 'tsx', 'mdx'],
  experimental: {
    appDir: true,
    mdxRs: true,
  }
};

module.exports = withMDX(nextConfig);

typedRoutes

Experimental support for statically typed links. This feature requires using the app directory flag (appDir: true), as well as TypeScript in your project.

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
    typedRoutes: true,
  },
};

module.exports = nextConfig;

serverComponentsExternalPackages

Dependencies used inside Server Components and Route Handlers will automatically be bundled by Next.js.

If a dependency is using Node.js specific features, you can choose to opt-out specific dependencies from the Server Components bundling and use native Node.js require.

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

module.exports = nextConfig;

Next.js includes a short list of popular packages that currently are working on compatibility and automatically opt-ed out:

• @prisma/client
• @sentry/nextjs
• @sentry/node
• autoprefixer
• aws-crt
• bcrypt
• cypress
• eslint
• express
• firebase-admin
• jest
• lodash
• mongodb
• next-mdx-remote
• next-seo
• postcss
• prettier
• prisma
• rimraf
• sharp
• shiki
• sqlite3
• tailwindcss
• ts-node
• typescript
• vscode-oniguruma
• webpack

transpilePackages

Next.js 13 can automatically transpile and bundle dependencies from local packages (like monorepos) or from external dependencies (node_modules). This replaces the next-transpile-modules package.

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

module.exports = nextConfig;

pageExtensions

By default, Next.js accepts files with the following extensions: .tsx, .ts, .jsx, .js. This can be modified to allow other extensions like markdown (.md, .mdx).

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

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['ts', 'tsx', 'mdx'],
  experimental: {
    appDir: true,
    mdxRs: true,
  }
};

module.exports = withMDX(nextConfig);