Next.js Config Builder
Build next.config.js interactively with common configurations
About this ToolHow it works, benefits & use casesTap to collapse
next.config.js options are easy to mistype and hard to remember — this builder lets you toggle them in a form and writes the file for you. Switch React Strict Mode and SWC minification on or off, choose an output mode (default, standalone for Docker, or static export), add a comma-separated list of allowed image domains (which also enables AVIF and WebP formats), turn on experimental App Directory and Server Actions, enable the styled-components compiler transform, and optionally ignore TypeScript build errors. Click Generate and you get a properly structured next.config.js with the @type JSDoc annotation and module.exports already wired up. A "Load Template" dropdown drops in ready-made presets — Basic, With Images, App Router, and Production Ready — as a starting point. The output can be copied, downloaded as next.config.js, or shared via URL, and the whole thing runs client-side.
How to Use
- 1Toggle Basic Settings (React Strict Mode, SWC Minification) on or off.
- 2Pick an Output Mode — Default, Standalone (Docker), or Static Export.
- 3Add comma-separated image domains, and enable App Directory, Server Actions, styled-components, or ignore-build-errors as needed.
- 4Or choose a preset from the "Load Template…" dropdown (Basic, With Images, App Router, Production Ready).
- 5Click "Generate Config", then copy, download as next.config.js, or share the result via its URL.
Key Benefits
- Toggle React Strict Mode and SWC minification without remembering the keys
- Output mode switch for standalone (Docker) and static export builds
- Image domains input that also enables AVIF and WebP formats
- Experimental App Directory and Server Actions checkboxes
- styled-components compiler transform and ignore-TypeScript-errors options
- One-click presets: Basic, With Images, App Router, and Production Ready
- Outputs a typed, module.exports-ready next.config.js you can copy or download
Common Use Cases
- Scaffolding a next.config.js for a fresh Next.js project in seconds
- Adding standalone output before containerising a Next.js app with Docker
- Enabling external image domains and modern formats for next/image
- Turning on App Router and Server Actions experimental flags
- Producing a production-ready config baseline to hand to a teammate via a link
Configuration Options
Basic Settings
Output Mode
Image Optimization
Comma-separated list of allowed image domains
Experimental Features
Compiler Options
Build Options
Run to see the generated next.config.js.
Configuration Tips
- Enable SWC minification for faster builds
- Use standalone output for Docker deployments
- Configure image domains for external images
- App Directory is the recommended approach for Next.js 13+
Was this tool helpful?
Share Your Experience
Help others discover this tool!
Related tools
- JavaScript FormatterFormat and beautify JavaScript code
- Browserslist GeneratorGenerate browserslist configurations
- Tailwind Config GeneratorVisually build a Tailwind config - theme extend, colors, spacing, fonts, screens, plugins - and export it as a v3 JS config or a v4 @theme CSS block
- TOML to JSONConvert TOML to JSON format
- Vercel Config GeneratorBuild vercel.json — redirects, rewrites, headers (with security quick-add), crons, regions — with live JSON, presets, and a conflict audit
- MCP Server Config GeneratorGenerate valid Model Context Protocol server config for Claude Desktop, Claude Code, Cursor, VS Code, Windsurf & Zed
It sets Next.js's output field. "Standalone (Docker)" produces a self-contained build ideal for container images, "Static Export" emits a fully static site, and "Default" omits the field entirely so Next.js uses its normal server build.
Enter a comma-separated list of hostnames in the Allowed Domains field. When you add at least one, the generated config includes an images block with those domains plus the AVIF and WebP formats enabled, which is what next/image needs to optimise remote images.