Next.js config visualizer. Parse and explore next.config options with descriptions, defaults, validation, and deprecation warnings.
100% browser-based — your data never leaves your device
Parse and explore next.config.js/ts options with descriptions and defaults.
outputThe build output mode. 'standalone' for serverless deployment.
'standalone' | 'export'Default: undefinedassetPrefixPrefix for static assets when hosted on a CDN.
stringDefault: ''basePathBase path for the application under a sub-path.
stringDefault: ''compressEnable gzip compression for rendered content.
booleanDefault: truedevIndicatorsConfiguration for the development indicators overlay.
objectDefault: { position: 'bottom-left' }distDirCustom build output directory.
stringDefault: '.next'envEnvironment variables available at build time.
objectDefault: {}eslintESLint configuration for builds.
objectDefault: { ignoreDuringBuilds: false }experimentalExperimental features (may change without notice).
objectDefault: {}generateBuildIdCustom build ID generation function.
functionDefault: undefinedgenerateEtagsEnable or disable ETag generation.
booleanDefault: trueheadersCustom HTTP headers for specific paths.
functionDefault: undefinedhttpAgentOptionsHTTP agent configuration for server-side requests.
objectDefault: { keepAlive: true }i18nInternationalization configuration.
objectDefault: undefinedimagesImage optimization configuration.
objectDefault: { formats: ['image/webp'] }loggingLogging configuration for the server.
objectDefault: undefinedmiddlewareCustom middleware file path.
stringDefault: undefinedonDemandEntriesConfiguration for on-demand entry compilation.
objectDefault: { maxInactiveAge: 60000, pagesBufferLength: 5 }outputFileTracingEnable output file tracing for standalone deployment.
booleanDefault: truepageExtensionsFile extensions to resolve as pages.
string[]Default: ['tsx', 'ts', 'jsx', 'js']poweredByHeaderInclude X-Powered-By header in responses.
booleanDefault: trueproductionBrowserSourceMapsEnable source maps in production.
booleanDefault: falsereactStrictModeEnable React strict mode for development.
booleanDefault: falseredirectsURL redirect configuration.
functionDefault: undefinedrewritesURL rewrite configuration.
functionDefault: undefinedsassOptionsSASS compiler options.
objectDefault: {}serverExternalPackagesPackages to mark as external on the server.
string[]Default: []trailingSlashAdd trailing slash to URLs.
booleanDefault: falsetranspilePackagesPackages to transpile with Next.js compiler.
string[]Default: []typescriptTypeScript configuration for builds.
objectDefault: { ignoreBuildErrors: false }webpackCustom webpack configuration.
functionDefault: undefinedVisual builder for Next.js App Router routes including groups and parallel routes.
Middleware Matcher BuilderBuild and test Next.js middleware config matcher patterns visually.
next.config VisualizerParse and explore next.config.js/ts options with descriptions and defaults.
Image Optimization CalculatorCalculate optimal image dimensions, sizes, and srcset for Next.js Image.
Route Handler GeneratorGenerate Next.js App Router API route boilerplate with type safety.
next.config Visualizer is a free online next.js tool that parse and explore next.config.js/ts options with descriptions and defaults. It works entirely in your browser — no downloads, no installations, and no server uploads required. React developers, full-stack engineers, frontend architects use next.config Visualizer when they need a fast, privacy-respecting way to process next.js data without installing additional software. It supports capabilities such as config reference, json input, validation. Additional features include comparison. Common use cases include audit existing next.config for deprecated or misconfigured options, explore available configuration options before upgrading next.js versions, compare different configuration approaches for images, rewrites, and redirects. All processing happens locally using modern browser APIs, which means your data never leaves your device. This makes next.config Visualizer ideal for working with sensitive data, proprietary code, or any situation where privacy matters.
next.config Visualizer is a free online next.js tool that helps you parse and explore next.config.js/ts options with descriptions and defaults. Key capabilities include config reference, json input, validation. All processing is done locally in your browser — no data is uploaded, stored, or shared with any server. There are no sign-ups, no file size limits, and no hidden charges. It is commonly used to audit existing next.config for deprecated or misconfigured options.
Copy your next.config.js or next.config.ts file contents and paste them into the input area.
Each configuration option is displayed with its description, type, default value, and current setting for easy review.
Look for deprecation warnings, type mismatches, and common misconfigurations highlighted by the validation engine.
Use the comparison feature to see different option values side by side when evaluating configuration trade-offs.
| Category | Details |
|---|---|
| Input Limits | Configuration size: Browser memory bound |
| Route depth: Unlimited | |
| Supported Formats | Next.js config, JavaScript, TypeScript, JSON |
| Browser Engine |
|
All operations run entirely in your browser using built-in Next.js APIs. No server uploads, no data storage, and no third-party requests.
next.config Visualizer is ideal when you need to audit existing next.config for deprecated or misconfigured options without installing software or uploading data to a server. Since everything runs in your browser, there is no setup time and no risk of your data being stored on external servers. For one-off tasks and quick processing, next.config Visualizer is faster than setting up a local development environment or using a command-line tool.
No. next.config Visualizer processes everything entirely in your browser using JavaScript. Nothing you type, paste, or upload is ever transmitted to any server. Your data never leaves your device.
Paste your next.config.js/ts file and the tool parses every option with descriptions, expected types, default values, and any deprecation warnings.
Yes. It checks for common misconfigurations, deprecated options, and type mismatches in your next.config file.
Searchable reference of all next.config options with types and defaults.
Paste your next.config and see it parsed with explanations.
Check for common misconfigurations and deprecated options.
Compare different config options side by side.
next.config Visualizer is useful in a variety of scenarios across different workflows:
Audit existing next.config for deprecated or misconfigured options
Explore available configuration options before upgrading Next.js versions
Compare different configuration approaches for images, rewrites, and redirects
SWC minification is enabled by default in Next.js 13+. It provides faster builds than Terser while maintaining compatibility.
Enable the standalone output mode in next.config for smaller, self-contained Docker deployments.
Explore more tools in the Next.js workspace:
App Router Path Builder
Visual builder for Next.js App Router routes including groups and parallel routes.
Middleware Matcher Builder
Build and test Next.js middleware config matcher patterns visually.
Image Optimization Calculator
Calculate optimal image dimensions, sizes, and srcset for Next.js Image.
Route Handler Generator
Generate Next.js App Router API route boilerplate with type safety.