UntangleToolsUntangleTools

Next.js config generator

Pick what your deployment needs. The file writes itself.

Sensible defaults with the platform doing the packaging.Standalone output, compression left to the proxy.Standalone pods sharing one Redis-backed ISR cache.Plain HTML for object storage or GitHub Pages.Node behind a reverse proxy that owns compression and TLS.Workspace packages traced and transpiled correctly.Assets on an edge origin with long-lived caching.Full header set, tight image hosts, nothing leaked.Every safe compiler and bundle optimization switched on.Strict mode and nothing else.

React Strict Mode

reactStrictMode

Double-invoke render and effects in development to surface unsafe code.

Catches unsafe lifecycles, missing effect cleanups and impure renders before they reach production.

Recommended

Build output mode

output

Package the build as a standalone server or as a fully static export.

standalone traces only the files the server actually needs, so a Docker image drops from hundreds of megabytes to tens. export emits plain HTML you can host on any static bucket.

Build directory

distDir

Rename the folder the build is written to.

Useful when another tool in the repo already owns `.next`, or when a host expects a specific folder name.

Base path

basePath

Serve the whole app under a sub-path such as /docs.

Lets you host the app under a path on a shared domain, behind an nginx location block or an ingress rule.

Asset prefix

assetPrefix

Serve static assets from a CDN origin instead of your app domain.

Moves JS, CSS and font delivery to a CDN edge, cutting latency and taking load off the origin server.

Trailing slash

trailingSlash

Force every URL to end with a slash.

Most static hosts resolve `/about/` to `/about/index.html`, so a static export is far more predictable with this on.

Page extensions

pageExtensions

Restrict or extend which file extensions become routes.

Needed to route `.mdx` files, or to co-locate tests and stories next to pages without turning them into routes.

Build-time environment variables

env

Inline values into the bundle at build time.

Handy for values that are genuinely public and fixed at build time, such as a release tag or a build id.

Server external packages

serverExternalPackagesv15.0

Keep specific server packages out of the bundler.

Packages with native bindings or dynamic requires break when bundled. Listing them keeps them as runtime requires.

Transpile packages

transpilePackages

Compile untranspiled dependencies from your monorepo or npm.

Workspace packages that ship raw TypeScript or modern syntax need compiling before they can run in the app.

File tracing root

outputFileTracingRoot

Point tracing at the monorepo root so shared files are included.

In a monorepo the app folder is not the dependency root, so tracing misses hoisted packages and the standalone build crashes at runtime.

Clean build directory

cleanDistDir

Wipe the build folder before each build.

Explicitly stating it documents intent in a repo where CI reuses the same workspace between runs.

Allowed remote image hosts

images.remotePatterns

Whitelist the hosts next/image is allowed to optimize from.

next/image refuses to optimize any host you have not listed, which stops strangers from using your optimizer as a free image proxy.

Image domains (legacy)

images.domainsdeprecated

The old hostname whitelist, kept for migrations only.

Only useful while migrating an older codebase that still relies on it.

Output formats

images.formats

Modern formats the optimizer may serve.

AVIF typically lands 20 to 30 percent smaller than WebP at the same quality, which directly helps LCP on image-led pages.

Device breakpoints

images.deviceSizes

Widths generated for images that fill the viewport.

Trimming the default list to the breakpoints your layout actually uses cuts the number of variants generated and cached.

Fixed-size widths

images.imageSizes

Widths generated for images with a known display size.

Match these to your real thumbnail and avatar sizes so small images never fall through to a device-size variant.

Allowed quality values

images.qualitiesv16.0

Restrict which `quality` values callers may request.

Without a list, any integer from 1 to 100 creates a separate cache entry, so one popular image can occupy a hundred slots.

Minimum cache lifetime

images.minimumCacheTTL

Floor for how long an optimized image is cached, in seconds.

Upstream hosts often send a short max-age. Raising the floor stops your optimizer re-fetching and re-encoding the same file all day.

Disable image optimization

images.unoptimized

Serve every image exactly as authored.

Required for a static export, and reasonable when a CDN such as Cloudinary or imgix already handles resizing.

Allow remote SVG

images.dangerouslyAllowSVG

Permit SVG files through the image optimizer.

Needed when logos or icons come from a CMS as SVG and must go through next/image.

Image content disposition

images.contentDispositionType

How the browser is told to handle optimized image responses.

Setting attachment stops a directly opened SVG from executing in the origin's context.

Custom image loader

images.loader

Hand URL building to an external image service.

Lets an existing image CDN do the resizing so the Next.js server never touches image bytes.

Loader file path

images.loaderFile

Module that exports the custom loader function.

Required whenever the loader is set to custom.

Security response headers

headers

Send hardening headers on every route.

These headers close off whole classes of attack at the edge, and security scanners check for them before anything else.

CORS route pattern

headers

Which routes the cross-origin rules apply to.

Scoping CORS to your API routes keeps the rest of the site unaffected.

Allowed origins

headers

Origins permitted to call your API from a browser.

An explicit origin list is the difference between a private API and one any site can call with a visitor's session.

Allowed methods

headers

HTTP methods accepted from other origins.

Preflight requests fail unless the method is listed, and listing only what you use keeps the surface small.

Allowed request headers

headers

Custom headers other origins may send.

Any header beyond the browser-safe list must be named here or the preflight fails.

Allow credentials

headers

Let cross-origin requests carry cookies.

Required when a separate front-end domain authenticates against your API using cookies.

Crawler control header

headers

Send X-Robots-Tag to keep an environment out of search results.

A header applies to every response including PDFs and JSON, which a robots.txt file and a meta tag cannot cover.

Static asset caching

headers

Long-lived cache rules for your own asset folders.

Files in `public/` are not fingerprinted, so they get a short cache by default and are re-fetched far more often than they need to be.

Hide X-Powered-By

poweredByHeader

Stop advertising the framework in every response.

Removes a free hint that tells an attacker exactly which framework and exploit set to try.

Disable ETag generation

generateEtags

Skip ETags when a proxy or CDN already handles validation.

Behind a CDN that generates its own validators, the origin ETag is redundant work on every response.

Disable built-in compression

compress

Hand gzip and brotli to nginx or the CDN instead.

Compressing twice wastes CPU. A reverse proxy or CDN usually does it faster and supports brotli properly.

Script crossOrigin attribute

crossOrigin

Attribute added to script tags Next.js injects.

Needed when assets are served from a different origin and you want useful error messages instead of an opaque script error.

Disable HTTP keep-alive

httpAgentOptions.keepAlive

Turn off connection reuse for server-side fetches.

Some load balancers and service meshes drop pooled connections, which surfaces as intermittent socket hang-ups.

Redirects

redirects

Send one path to another with a real HTTP status.

The correct way to preserve ranking and inbound links after a URL change, and to retire old marketing paths.

Rewrites

rewrites

Proxy a path to another destination without changing the URL.

Lets you put a Next.js app in front of an existing backend, or migrate route by route while the URLs stay stable.

Skip trailing slash redirect

skipTrailingSlashRedirect

Stop Next.js redirecting between slashed and unslashed URLs.

Necessary when middleware or an upstream proxy already normalizes URLs and you want to avoid a redirect loop.

Skip middleware URL normalize

skipMiddlewareUrlNormalize

Give middleware the raw, unnormalized URL.

Needed when middleware has to inspect the exact incoming URL, including internal data-fetch paths.

Strip console calls

compiler.removeConsole

Remove console output from production builds.

Debug logs shrink the bundle slightly and, more importantly, stop internal state from being printed in a visitor's console.

Strip test attributes

compiler.reactRemoveProperties

Drop data-testid props from production output.

Test hooks add DOM weight and quietly describe your component structure to anyone reading the markup.

styled-components support

compiler.styledComponents

Enable the SWC transform for styled-components.

Gives correct server-side rendering and readable class names without a Babel plugin, which keeps SWC's build speed.

Optimize package imports

experimental.optimizePackageImports

Tree-shake barrel-file packages like icon libraries.

Barrel files make one icon import pull in the entire library. This rewrites those imports to direct module paths.

Inline critical CSS

experimental.optimizeCss

Inline above-the-fold CSS and defer the rest.

Removes a render-blocking stylesheet request, which is often the last thing standing between a page and a perfect Lighthouse score.

React Compiler

experimental.reactCompilerv15.0

Let the compiler insert memoization for you.

Removes most hand-written useMemo and useCallback while keeping, and usually improving, render performance.

Partial prerendering

experimental.ppr

Serve a static shell and stream the dynamic parts in.

Gives a static first byte on pages that also need per-user data, which normally forces the whole route to be dynamic.

Server action body limit

experimental.serverActions.bodySizeLimit

Maximum payload a server action will accept.

The default 1mb rejects most direct file uploads through a server action.

Static generation timeout

staticPageGenerationTimeout

Seconds a single page may take to prerender.

Large catalogue builds that hit slow upstream APIs exceed the 60 second default and fail the whole build.

CDN stale-while-revalidate

expireTime

Seconds a CDN may serve stale ISR content while revalidating.

Lets the CDN answer instantly from cache while your origin regenerates the page in the background.

Custom cache handler

cacheHandler

Share the ISR cache across instances with Redis.

Without it, every container keeps its own in-memory ISR cache, so revalidation on one pod leaves the others stale.

In-memory cache size

cacheMaxMemorySize

Bytes of ISR cache kept in process memory. Zero disables it.

Set it to zero alongside a shared cache handler so a pod never serves a stale copy it is holding locally.

Reduce build memory

experimental.webpackMemoryOptimizations

Trade some build speed for lower peak memory.

Fixes out-of-memory build failures in CI runners and containers with tight memory limits.

Turbopack root

turbopack.root

Tell Turbopack where the workspace root is.

In a monorepo Turbopack can infer the wrong root from a stray lockfile and then resolve modules from the wrong place.

Ignore TypeScript errors

typescript.ignoreBuildErrors

Let the build finish even with type errors.

An emergency hatch for shipping a hotfix while a dependency's types are broken.

Skip ESLint during build

eslint.ignoreDuringBuilds

Do not run linting as part of next build.

Reasonable when a separate CI step already lints, since running it twice just slows the build down.

ESLint directories

eslint.dirs

Limit which folders are linted during the build.

Keeps linting off generated code, fixtures and scripts that will never satisfy the app's rules.

Production source maps

productionBrowserSourceMaps

Ship browser source maps with the production build.

Turns minified production stack traces into readable ones, which most error monitoring depends on.

Log full fetch URLs

logging.fetches.fullUrl

Print complete URLs for server-side fetches in development.

Makes it obvious which fetches are hitting the cache and which are going out again, which is otherwise guesswork.

Next.js config generator

Stop copying next.config from your last project

Most next.config files are inherited, not written.

Copied from an old repo, missing half the comments, never quite matching the app it's pasted into.

This tool flips that. Pick your deployment, Vercel, Docker, Kubernetes, a static export, and only the settings that actually apply switch on, each with a plain explanation attached.

Every option gets checked against every other one, so the file you copy out is one that builds, not one you find out is broken five minutes into a deploy.

next.config.tsnext.config.jsVercelDockerKubernetesstatic exportCORS headersnext/image

60+

config options covered

10

deployment presets

16

conflict and security checks

0

requests sent off your device

Walkthrough

Five steps from blank page to a finished file

  1. Start from a preset or a blank slate

    Presets

    Pick the preset closest to where you deploy, Vercel, Docker, a static export, and it switches on the options that setup actually needs. Rather start from nothing? React Strict Mode is the only thing on by default.

  2. Turn on what your project needs

    Search & toggle

    Search by name or browse by group. Flipping an option on reveals its inputs right there, no separate settings page, so you see the effect on the generated file immediately.

  3. Fill in the specifics that are yours

    Your specifics

    Image hostnames, allowed CORS origins, a redirect map, whatever the option needs. Tap the question mark on any row for when to use it, when not to, and what actually breaks if you get it wrong.

  4. Let the Issues tab catch what you missed

    Auto-checked

    Every combination gets cross-checked as you go: a static export with rewrites still enabled, an open image host, credentials paired with a wildcard CORS origin. Conflicts show up before you've copied anything.

  5. Copy or download the file

    Ship it

    Grab it as next.config.ts or next.config.js, ESM or CommonJS. Drop it in your project root and run your usual build. Nothing here needs an account or a save step.

Under the hood

The logic behind the warnings

Every combination you switch on gets checked against every other one. These are a few of the rules actually running behind the Issues tab, written out so you can see the reasoning, not just the flag.

IF output is "export"

rewrites, redirects, response headers, and any ISR cache handler are all flagged

A static export has no server at request time, so anything that needs one has to move to whatever's actually serving the files, an S3 bucket policy, a Netlify redirects file, an nginx location block.

IF output is "export" and image optimization is still on

the build is flagged as broken, not just risky

next/image's optimizer is a server route. Without it disabled, or a custom loader pointed at an image CDN, the build fails the moment it tries to render an image.

IF a wildcard CORS origin is paired with credentials

the combination is flagged as an error

Browsers refuse this pairing outright, a wildcard origin can never carry cookies, so shipping it isn't risky, it's just broken from the first request.

IF an SVG host is allowed without a content-disposition set

it's flagged as a security gap

An SVG can carry a script tag. Served inline from your own domain, that's stored XSS with your origin's trust. Setting the disposition to attachment closes it.

IF a Redis-backed cache handler is set but the in-memory cache isn't zeroed

you get a note about it, not an error

Each container still keeps its own local copy on top of the shared one, so a page revalidated on one pod can look stale on another until the local cache expires.

IF both images.domains and images.remotePatterns are configured

it's flagged as redundant

The old list only matches a hostname. The new one also pins protocol, port, and path, which is what actually limits who can use your image optimizer as a free resizing service.

Real setups

Four ways teams actually use this

Dashboard app on Vercel

A SaaS dashboard pulling avatars and attachments from Cloudinary, deployed straight to Vercel with no container step.

images.remotePatternscompiler.removeConsoleexperimental.optimizePackageImports

Cloudinary is the only image host allowed, console noise is stripped from the shipped bundle, and the icon library stops pulling in its entire barrel file.

Internal tool on Kubernetes

An admin tool running as several pods behind a load balancer, sharing one Redis instance for session data.

output: standalonecacheHandlercacheMaxMemorySize: 0generateEtags: false

The image drops to a fraction of its original size, and every pod reads ISR pages from the same Redis cache instead of disagreeing with each other.

Docs site as a static export

A documentation site with no server-side logic at all, hosted from a plain storage bucket.

output: exportimages.unoptimizedtrailingSlash

The build emits plain HTML the bucket can serve directly, with URLs shaped the way most static hosts expect them.

Public API with a locked-down front end

A REST API called only from one known front-end origin, with cookies used for auth.

headers → corsOriginscorsCredentialssecurityHeaders

Only the app's own origin can call the API from a browser, and the response carries HSTS, a frame policy, and a referrer policy by default.

Questions people actually ask

FAQ

No. Presets cover the common deployment targets, and every option comes with a short description plus a Learn more explaining what it's for. You can build a working config without knowing what outputFileTracingRoot means going in.

It's syntactically complete and cross-checked for conflicts, but it still reflects choices only you can make, which image hosts are really yours, which origins should really be trusted. Treat the Issues tab as a second pair of eyes, not a substitute for reading what you turned on.

A static export has no Next.js server running when someone visits the site, and rewrites are resolved by that server. The fix isn't in next.config at all, it's moving the rule to whatever host is actually serving the static files.

domains only checks the hostname. remotePatterns also checks protocol, port, and path, which is the part that actually stops a stranger from optimizing arbitrary images through your server. The old key still works but is on its way out.

Both. TypeScript output always uses export default, since a .ts config is treated as an ES module regardless of what your project's module setting is elsewhere. JavaScript output lets you pick ESM or CommonJS.

Origins, methods, allowed headers, and the credentials flag all merge into a single generated headers() block, grouped by the route pattern you set. If you list more than one allowed origin, it flags that you'll need middleware to echo back the matching one, since a header can only carry one value.

Only once more than one instance of your app is serving the same pages. A single server or a Vercel deployment already keeps this consistent on its own. On Kubernetes or behind Docker replicas, each container otherwise holds its own copy of the ISR cache.

No. Every option you toggle stays in your browser tab and is used only to render the file on screen. Nothing is uploaded, logged, or saved once you close the page.

UntangleTools Logo
UntangleTools Logo
UntangleTools Logo
Brand Logo for footer
Free Invoice GeneratorAI Carbon CalculatorGPT Token CounterClaude Token CounterRoman Converter
Age CalculatorColor ConverterRGB to Hex ConverterAdvanced Watermark ToolAdvanced CSV Diff Tool
Text ConvertorText to Array ConverterNumber to Word ConvertorPercentage ToolkitPurchase Reality Checker
Latest ArticlesUnit ConvertorGPA CalculatorGrade CalculatorAd Spend Calculator

UntangleTools

© 2026 UntangleTools. All Rights Reserved.