Staaarter Tools

Next.js Config Generator

Generates a valid next.config.mjs with reactStrictMode, images.remotePatterns for allowed external image hosts, a headers() function with common security headers, and redirects()/rewrites() arrays built from source/destination rows. A free online tool from Staaarter, right in your browser.

Runs locallyUpdated 2026-07-26
generatornextjsreactconfig

Overview

Introduction

A production Next.js app usually needs the same handful of next.config.mjs additions, allowed image hosts, basic security headers, and a redirect or rewrite rule or two, each with its own array-of-objects shape that's easy to mistype.

This tool generates a working next.config.mjs covering all of that from a simple form, ready to drop at the project root.

What Is Next.js Config Generator?

A next.config.mjs generator covering reactStrictMode, images.remotePatterns (built from bare hostnames), a headers() function returning common security headers, and redirects()/rewrites() arrays from source/destination rows.

The output is real, valid ES module JavaScript matching Next.js's current recommended next.config.mjs shape, with async headers()/redirects()/rewrites() functions included only when you've configured at least one entry for them.

How Next.js Config Generator Works

Each image domain you enter (as a bare hostname, not a full URL) becomes a `{ protocol: "https", hostname }` entry under images.remotePatterns, and providing a full URL instead produces a validation error explaining the expected format.

Enabling security headers adds a `headers()` function returning a fixed, well-known set of protective headers applied to every path (`/:path*`); redirect and rewrite rows are filtered to only complete entries and rendered as the array-of-objects shape those functions must return.

When To Use Next.js Config Generator

Use it when configuring a new Next.js project that needs to display images from an external CDN or headless CMS, or that needs baseline security headers before a production launch.

It's also useful for quickly producing the array shape for a handful of redirect/rewrite rules (like a legacy URL migration) without re-reading Next.js's config reference each time.

Often used alongside Tailwind Config Generator and React Environment Variables Generator.

Features

Advantages

  • Uses the current images.remotePatterns approach rather than the deprecated images.domains array, matching what new Next.js projects should use.
  • Bundles a sensible baseline set of security headers (frame options, content-type sniffing, referrer policy, permissions policy) in one toggle.
  • Filters incomplete redirect/rewrite rows automatically, so a half-filled form row never produces a broken array entry.

Limitations

  • The security headers toggle applies one fixed, general-purpose set to every path; a Content-Security-Policy (which varies significantly per app) isn't included and needs separate, app-specific configuration.
  • Doesn't validate that redirect/rewrite source patterns use valid Next.js path-matching syntax beyond checking they're non-empty.

Examples

Allowing a CDN image host with security headers and one redirect

Input

reactStrictMode: true, imageDomains: ["cdn.example.com"], includeSecurityHeaders: true, redirects: [{source: "/old-blog", destination: "/blog", permanent: true}]

Output

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    remotePatterns: [
      { protocol: "https", hostname: "cdn.example.com" },
    ],
  },
  async headers() {
    return [
      {
        source: "/:path*",
        headers: [
          { key: "X-Frame-Options", value: "SAMEORIGIN" },
          { key: "X-Content-Type-Options", value: "nosniff" },
          { key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
          { key: "Permissions-Policy", value: "camera=(), microphone=(), geolocation=()" },
        ],
      },
    ];
  },
  async redirects() {
    return [
      { source: "/old-blog", destination: "/blog", permanent: true },
    ];
  },
};

export default nextConfig;

Best Practices & Notes

Best Practices

  • Only allow-list image hostnames you actually control or trust, since remotePatterns is effectively a security boundary for next/image's optimization pipeline.
  • Add a Content-Security-Policy header separately once you know your app's actual script/style/connect sources, on top of the general headers this tool generates.
  • Use permanent: true redirects for URLs that have moved for good, so search engines transfer ranking signals to the new destination.

Developer Notes

images.remotePatterns entries are always emitted with `protocol: "https"` since allowing arbitrary-protocol remote images (including plain http) widens the attack surface for the image optimizer with little practical benefit for a production site. redirects()/rewrites()/headers() are Next.js config functions that must return (or resolve to) arrays of specifically shaped objects; this generator produces exactly Next.js's documented shape for each so the resulting next.config.mjs is loaded without a schema mismatch at build time.

Next.js Config Generator Use Cases

  • Allow-listing an external CDN or headless CMS's image hostname for next/image
  • Adding baseline security headers to a Next.js app before a production launch
  • Setting up a handful of redirect or rewrite rules for a URL structure migration

Common Mistakes

  • Entering a full URL (with https:// and a path) instead of a bare hostname for an image domain, which images.remotePatterns doesn't expect in the hostname field.
  • Relying on this tool's general security headers as a complete security posture without adding an app-specific Content-Security-Policy, which needs to be hand-tailored to the app's actual resources.

Tips

  • Use the Tailwind Config Generator alongside this if the project also uses Tailwind, since both configs typically live at the project root together.

References

Frequently Asked Questions