Next.js Config Generator

Generate Next.js configurations (next.config.mjs or next.config.js). Configure rewrites, redirects, image domains, headers, and strict mode.

Output:A ready-to-use configuration file for Next.js Config with best practices applied.

Output Mode

React Strict Mode- Highlights potential problems in an application by double-rendering components in development.

Enable Image Optimization- Use the Next.js Image component for automatic WebP conversion and resizing.

Allowed Image Domains (Comma separated)

Domains to allow for remote image optimization (e.g., res.cloudinary.com).

Apply Strict Security Headers- Automatically injects HSTS, X-Frame-Options, X-Content-Type-Options, and Referrer-Policy.

X-Powered-By Header- If checked, Next.js adds 'X-Powered-By: Next.js' to HTTP responses.

Gzip Compression- Compress rendered HTML and JSON responses. Disable this if you have a proxy like Nginx handling compression.

Trailing Slashes- Force URLs to end with a slash (e.g., /about/ instead of /about).

Base Path

Deploy a Next.js application under a sub-path (e.g., /docs).

Transpile Packages (Monorepos)

Comma-separated list of NPM packages to transpile (useful for shared UI workspaces).

Include Redirects Template- Generates a template for handling HTTP 301/302 redirects.

Include Rewrites Template- Generates a template for proxying requests to an external API or legacy system.

Enable Experimental Features- Enable cutting-edge features (e.g., typedRoutes, serverActions in older versions).

Quick Summary

A Next.js Config Generator creates the next.config.mjs file, allowing you to easily configure routing, image optimization domains, security headers, and compiler behaviors for your Next.js application.

What is this tool?

A Next.js Config Generator is an online developer tool that scaffolds the central configuration file required by the Next.js React framework. Instead of digging through documentation to find the correct array syntax for setting up remote image patterns, permanent redirects, or custom security headers, you can use a visual interface.

It outputs a standard next.config.mjs (or .js) file that ensures your app builds correctly, optimizes assets securely, and routes traffic efficiently at the edge or server level.

How to Use This Tool

Configure Images — Add allowed remote domains or URL patterns so the Next.js <Image /> component can fetch and optimize external images.
Set up Redirects — Create permanent (308) or temporary (307) redirects from deprecated URLs to new ones to preserve SEO rankings.
Define Rewrites — Mask external API URLs behind your own domain to bypass browser CORS restrictions (e.g., rewrite /api to https://external-backend.com).
Add Security Headers — Inject Content-Security-Policy (CSP) and X-Frame-Options headers to protect your app from XSS and clickjacking.
Export Config — Download the next.config.mjs file and place it in the root directory of your Next.js project.

What This Tool Generates

next.config.mjs — The Node.js configuration file parsed by the Next.js build server to define routing rules, environment variables, and compiler options before the app starts.

Example Output Explanation

This snippet configures Next.js to strictly render React components, optimize external Unsplash images, and handle a legacy URL redirect:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.unsplash.com',
      },
    ],
  },
  async redirects() {
    return [
      {
        source: '/old-blog/:slug',
        destination: '/blog/:slug',
        permanent: true,
      },
    ]
  }
}

export default nextConfig;

Best Practices

Always keep 'reactStrictMode: true'. It forces React to render components twice in development to catch unsafe lifecycles and side effects early.
Use 'remotePatterns' instead of the deprecated 'domains' array in the images config. It allows you to strictly control which external URLs are allowed (by protocol and path), preventing potential Server-Side Request Forgery (SSRF) attacks.
Use 'rewrites()' to proxy API requests to your backend. This allows your frontend to fetch from '/api/users' while Next.js securely forwards the request to 'https://backend.example.com/users' under the hood, completely bypassing CORS restrictions in the browser.

Common Mistakes

Trying to use ES Module syntax (export default) in a next.config.js file when '"type": "module"' isn't set in your package.json. Use the .mjs extension to avoid this.
Putting secret API keys or passwords in the 'env' object of next.config.mjs. This exposes them to the client-side browser bundle. Only use 'env' for public variables, and use standard .env.local files for secrets.
Forgetting that next.config.mjs runs in a Node.js environment during the build phase. You cannot use browser-specific APIs (like 'window' or 'document') inside this file.

Security Notes

Use the 'headers()' function to apply strict security headers like Strict-Transport-Security (HSTS) and X-Content-Type-Options to all routes across your application.
Be highly specific with 'remotePatterns' for images. If you allow '*' (all domains), attackers can use your Next.js server to fetch and optimize malicious external images, driving up your server bandwidth costs.

Testing Instructions

Save the generated file as 'next.config.mjs' in your project root.
Restart your Next.js development server (Ctrl+C then 'npm run dev'). The config file is only read once on startup.
Test your configured redirects or rewrites by navigating to the source URL in your browser and verifying the destination.

Frequently Asked Questions

What is the difference between redirects and rewrites?

A redirect (HTTP 301/302/308) tells the user's browser to literally change the URL in the address bar and load a new page. A rewrite changes the destination path secretly on the server side; the URL in the browser remains exactly the same. Rewrites are commonly used to proxy API requests to avoid CORS issues.

Why use .mjs instead of .js?

The .mjs extension explicitly tells Node.js that the file uses modern ES Modules syntax (import/export) rather than legacy CommonJS (require). Next.js officially recommends using next.config.mjs for modern applications.

Can I modify the Webpack configuration here?

Yes. Next.js allows you to extend the underlying Webpack configuration via the 'webpack' function inside next.config.mjs. However, this is rarely needed in Next.js 13+ thanks to the native SWC compiler and built-in CSS/Asset handling.

Why do external images break in the next/image component?

For security reasons, Next.js blocks external images by default. To fix this, you must explicitly add the external domain to the 'images.remotePatterns' array in your next.config.mjs file.

How We Keep Your Configs Safe & Valid

Built-in Error Checking

Every file is checked against official rules. We catch missing fields and bad syntax. YAML indentation errors are flagged right away. Kubernetes, Terraform, and Docker specs are all covered. API versions and labels are verified too. You get valid output every time you generate.

100% Private & Local

All tools run in your browser only. Your API keys never leave your machine. We do not use any tracking scripts. No data is sent to any server. Passwords and secrets stay on your device. Crypto operations use the Web Crypto API. Your privacy is fully protected at all times.

Secure Settings by Default

Configs use safe defaults out of the box. Containers run as non-root users. Root filesystems are set to read-only. Dangerous Linux capabilities are dropped. Network policies limit pod-to-pod traffic. TLS 1.3 is enabled for web servers. Security headers are added where needed.

Ready for CI/CD & Git

Output files are ready for your Git repo. Use them with ArgoCD, Flux, or GitHub Actions. Files use clear formatting and comments. Code review is easy for your team. Indentation and key order are consistent. Test in staging before going to production. Every file is clean and well-structured.

Infrastructure as Code

Store configs in Git alongside your code. Terraform modules include typed variables. Backend configs support remote state locking. Outputs work across multiple modules. Ansible playbooks use clear task steps. Chef and Puppet configs are also supported. Every file works with version control tools.

Monitoring & Tracing

Set up Prometheus with auto-discovery rules. Create Grafana dashboards with template variables. Add alerting rules with severity labels. Use OpenTelemetry for trace collection. Forward logs to Loki or Elasticsearch. Connect to Jaeger or Tempo for tracing. Monitor metrics, logs, and traces together.

Container & Docker Safety

Dockerfiles use multi-stage builds for small images. Base images are pinned to exact versions. Dev files are excluded from final images. Health checks are added for orchestrator use. Containers switch to non-root users. Docker Compose uses named volumes and networks. Resource limits are set in deploy configs.

Multiple Output Formats

Export as YAML, JSON, HCL, or TOML. Kubernetes uses YAML with proper separators. Terraform uses HCL with correct escaping. JSON output has consistent indentation. Copy to clipboard with one click. Preview output with syntax highlighting. Line numbers help you review quickly.