Compare Next.js Config Files Online
Paste two next.config.js or next.config.mjs files. See what was added, removed, or changed — line by line with word-level highlights.
🔒 100% private — runs entirely in your browseror try sample data
Paste two next.config.js or next.config.mjs files. See what was added, removed, or changed — line by line with word-level highlights.
🔒 100% private — runs entirely in your browseror try sample data
Next.js Config Diff compares two next.config.js or next.config.mjs files and shows you exactly which configuration options were added, removed, or modified. Whether you are upgrading Next.js versions, comparing settings across environments, or reviewing a teammate's config changes in a pull request, this tool gives you a clear, color-coded view of every difference.
The Next.js configuration file controls critical aspects of your application — image optimization, redirects, headers, webpack customization, and experimental features. A single misconfigured option can break image loading, expose APIs without CORS headers, or disable important security features. As Next.js evolves rapidly between major versions, configuration options are frequently renamed, deprecated, or restructured, making version-to-version comparison essential during upgrades.
Paste your config files from any source — your code editor, version control history, or different branches. The tool handles both CommonJS (module.exports) and ESM (export default) formats, as well as TypeScript configs. Everything runs in your browser so your configuration details, including environment variables and internal URLs, stay private.
// Next.js 12 (deprecated approach)
images: { domains: ['images.example.com', 'cdn.example.com'],
} // Next.js 14+ (recommended approach)
images: { remotePatterns: [ { protocol: 'https', hostname: 'images.example.com', pathname: '/uploads/**', }, { protocol: 'https', hostname: 'cdn.example.com', }, ],
} // Diff shows: domains removed, remotePatterns added
// with more granular path-level controlThe images.domains option was deprecated in favor of remotePatterns which provides protocol and pathname filtering. The diff tool makes this migration clearly visible.
// staging config
env: { NEXT_PUBLIC_API_URL: 'https://staging-api.example.com/v1', NEXT_PUBLIC_ENABLE_DEBUG: 'true', NEXT_PUBLIC_SENTRY_DSN: '',
}, // production config
env: { NEXT_PUBLIC_API_URL: 'https://api.example.com/v1', NEXT_PUBLIC_ENABLE_DEBUG: 'false', NEXT_PUBLIC_SENTRY_DSN: 'https://abc@sentry.io/123',
}, // Diff highlights:
// - Different API URLs
// - Debug flag enabled/disabled
// - Sentry DSN only set in productionComparing environment-specific configs ensures staging mirrors production where it should and diverges only where intended (debug flags, API endpoints, monitoring).
// Before: no experimental features
const nextConfig = { reactStrictMode: true,
}; // After: enabling new features
const nextConfig = { reactStrictMode: true, experimental: { serverActions: { bodySizeLimit: '2mb', }, optimizePackageImports: ['lucide-react'], ppr: true, },
}; // Diff shows the entire experimental block as newExperimental features can significantly change application behavior. The diff tool makes it easy to see exactly which experiments were enabled and their specific settings.
Many Next.js configs use dynamic JavaScript logic — reading environment variables with process.env, conditional blocks based on NODE_ENV, or importing shared config modules. This tool compares the source code of your config file, not the resolved runtime values. If you need to compare the effective configuration, log the final config object with console.log(JSON.stringify(nextConfig, null, 2)) and compare the output.
The swcMinify option was the default starting in Next.js 13 and was removed entirely in Next.js 15. If you see this option in an older config but not in a newer one, it is not a missing setting — it was simply removed because SWC minification is now always enabled. The diff will show it as a removed line, which is expected during upgrades.
The webpack option accepts a function, and comparing functions as text can produce noisy diffs if the logic was refactored without changing behavior. Focus on the configuration values inside the function (resolve.fallback, plugins, rules) rather than structural changes in the function body. Consider extracting webpack customizations into a separate file for cleaner comparisons.
Paste both next.config.js or next.config.mjs files into the two panels and click Compare. The tool highlights every line that was added, removed, or modified with word-level detail, making it easy to spot changes in image settings, redirects, headers, and other options.
Yes. This is especially useful when upgrading Next.js. Compare your current config with the recommended config for the new version to spot deprecated options (like images.domains), renamed properties, removed flags (like swcMinify), and new required settings.
If you use conditional logic in next.config.js based on environment variables, paste the source file for each environment. To compare the resolved config, log the final config object with console.log(JSON.stringify(nextConfig, null, 2)) in each environment and use the JSON Diff tool.
Yes. This tool runs entirely in your browser using client-side JavaScript. Your Next.js configuration, including internal URLs, API keys, and environment variables, is never sent to any server.
Yes. The tool performs text-based comparison, so it works with any file format — .js, .mjs, .ts, or even the experimental next.config.json. Paste the content regardless of the file extension.
Vercel-specific configuration lives in vercel.json, which is a separate file from next.config.js. Use the Config File Diff tool for vercel.json comparisons. Some settings overlap — headers and redirects can be defined in either file — so compare both when debugging deployment differences.