ConfigGenerator

Next.js Config Generator

Generate an optimized next.config.js with security headers, image optimization domains, and deployment modes.

- Highlights potential problems in an application by double-rendering components in development.
- Use the Next.js Image component for automatic WebP conversion and resizing.

Domains to allow for remote image optimization (e.g., res.cloudinary.com).

- Automatically injects HSTS, X-Frame-Options, X-Content-Type-Options, and Referrer-Policy.
- If checked, Next.js adds 'X-Powered-By: Next.js' to HTTP responses.
- Compress rendered HTML and JSON responses. Disable this if you have a proxy like Nginx handling compression.
- Force URLs to end with a slash (e.g., /about/ instead of /about).

Deploy a Next.js application under a sub-path (e.g., /docs).

Comma-separated list of NPM packages to transpile (useful for shared UI workspaces).

- Generates a template for handling HTTP 301/302 redirects.
- Generates a template for proxying requests to an external API or legacy system.
- Enable cutting-edge features (e.g., typedRoutes, serverActions in older versions).
next.config.mjs
1

Overview

How to configure Next.js for Production

The next.config.js (or next.config.mjs) file is the heart of your Next.js application. Misconfigurations here can lead to security vulnerabilities, massive Docker images, broken image optimization, or deployment failures on Vercel and Cloudflare Pages.

Best Practices

  • Docker Deployments: By default, Next.js requires the entire `node_modules` folder to run. By setting `output: 'standalone'`, Next.js traces exactly which files are needed and creates a minimal server. This reduces Docker image sizes by up to 80%.
  • Image Optimization: The `<Image />` component requires you to explicitly allow remote domains in the `remotePatterns` array. If you switch to `output: 'export'` (for static hosting on S3 or Cloudflare Pages), native Next.js image optimization is disabled, and you must use a custom loader or set `unoptimized: true`.
  • Routing: Use the `redirects` and `rewrites` features to manage traffic at the edge or server level, proxying API requests to avoid CORS or securely hiding your backend.

Security Recommendations

  • Missing Security Headers: Next.js does NOT apply strict security headers by default. Our generator injects `Strict-Transport-Security`, `X-Frame-Options` (preventing clickjacking), and `X-Content-Type-Options`. If you don't add these to your config, you must add them at your reverse proxy (e.g. Nginx).
  • Leaking Tech Stack: The `X-Powered-By` header reveals that your site is running Next.js. Removing it is a security best practice to prevent automated scanners from identifying your tech stack.

Frequently Asked Questions

What is transpilePackages used for?
If you are using a monorepo (e.g., Turborepo) and sharing a local UI package across multiple apps, you must tell Next.js to transpile that package. Otherwise, you will get syntax errors when importing untranspiled code from `node_modules`.
When should I use 'export' mode?
Use `output: 'export'` when you want to build a purely static HTML/CSS/JS site without a Node.js server. Features like API routes, server actions, and native image optimization will not work in this mode. This is the only way to deploy Next.js natively to GitHub Pages or an S3 bucket.
Should I use .js or .mjs for next.config?
Next.js officially recommends `next.config.mjs` for new projects to support ES Modules. Our generator defaults to providing the `.mjs` syntax for maximum compatibility with modern Node environments.