Next.js & Vercel Redirect Generator

· Free browser tool

The Next.js & Vercel Redirect Generator turns a plain list of source-to-destination pairs into two production-ready outputs at once: a valid next.config.js async redirects() array and a vercel.json redirects block. It exists because the two formats look similar but differ in the details that matter, like Next.js using a permanent boolean that resolves to a 308 while a classic 301 needs an explicit Vercel statusCode, and a single mis-typed quote breaks a whole config.

This tool is completely free and browser-based. It parses your redirect map, escapes every path correctly for both JavaScript and JSON, lets you set a permanent or temporary type per row or globally, and shows live validation, so you can copy a config that compiles the first time without sending your URL structure to any server.

Next.js & Vercel Redirect GeneratorFree · client-side
Add a third value temporary (or 302 / 307) on a line to override that row. Use :slug / :path* for Next.js params, or (.*) with $1 for capture groups.
Applied to every row that has no per-row override.
Vercel accepts either; statusCode lets you emit a classic 301.
next.config.js redirects()

      

🔒 Private: everything runs in your browser. Nothing you paste is uploaded.

How to use the Next.js and Vercel redirect generator

Paste one source , destination pair per line, choose a default redirect type, and switch between the next.config.js and vercel.json tabs to copy whichever format your deployment uses. Each output is rebuilt and revalidated on every keystroke.

Understand permanent versus temporary, and 308 versus 301

Next.js represents a permanent redirect with permanent: true, which it serves as an HTTP 308, and a temporary one with permanent: false, served as a 307. Both preserve the request method, unlike the older 301 and 302. Vercel accepts the same boolean, but if you specifically need a classic 301 for a legacy crawler or an external tool, switch the status style to emit an explicit statusCode instead. The generator handles both: pick a global default, then override any single row by adding a third value such as temporary on that line.

Keep dynamic segments and wildcards intact

Redirects rarely map one fixed URL to another. Next.js and Vercel both support named parameters like :slug and catch-all segments like :path*, which carry the matched value through to the destination, plus regex-style groups such as (.*) with $1 back-references. The generator passes these tokens through untouched into both formats rather than escaping them away, so a source of /docs/v1/:path* reaching /docs/:path* keeps working. It only normalises obvious mistakes, like prepending a leading slash when a source is missing one, since Next.js requires it.

Trust the escaping instead of hand-editing strings

The most common reason a generated config fails to build is a quote or backslash inside a path that was never escaped. This tool escapes destinations and sources for the exact context they land in: single-quoted JavaScript string literals in next.config.js and double-quoted, fully escaped JSON values in vercel.json. The JSON side uses the browser’s own serializer, so the output is guaranteed parseable. Lines that cannot form a valid rule are skipped and reported rather than silently corrupting the file, which keeps the copied result safe to paste straight into your repository.

Next.js and Vercel redirect generator FAQs

Q1Should I use next.config.js redirects or vercel.json?

If your project runs on the Next.js framework, defining redirects in next.config.js keeps them in code and works across hosts. If you deploy static or non-Next sites to Vercel, or want redirects handled at the platform edge before the framework loads, vercel.json is the right place. This generator produces both from the same list, so you can copy whichever your setup needs.

Q2What is the difference between a 308 and a 301 redirect?

Both are permanent redirects that pass link equity, but a 308 requires the browser to keep the original request method and body, while a 301 historically allowed clients to switch a POST to a GET. Next.js emits 308 for a permanent redirect. For most SEO migrations either is fine; choose the explicit statusCode option here only when a specific tool expects a classic 301.

Q3Can I set a different redirect type for each row?

Yes. Set a global default with the redirect type selector, then override any individual line by adding a third comma-separated value. Use temporary, temp, 302, or 307 for a temporary redirect, or permanent, perm, 301, or 308 for a permanent one. Rows without a third value simply inherit the global default you selected.

Q4Does this redirect generator send my URLs anywhere?

No. The parsing, escaping, and config generation all run in your browser with client-side JavaScript. Nothing you paste into the redirect map is uploaded, logged, or stored, and the tool keeps working offline once the page has loaded. That makes it safe to use with internal staging paths or an unpublished site architecture you do not want exposed.

Q5Why are some of my lines being skipped?

Each line must contain at least a source and a destination separated by a comma. A line is skipped when it has fewer than two values, when either the source or destination is empty, or when a third override value is present but not a recognised type. The tool reports which line numbers were skipped so you can correct them rather than shipping a broken config.

Hristo Bogdanov, Head of SEO at SEO Domains

Hristo Bogdanov

Head of SEO @ SEO Domains · CEO & Co-founder of SEO.bo

Hristo has spent 15+ years building aged-domain acquisition and screening workflows for SEO professionals, brand owners, and domain investors, and builds the free tooling SEO Domains publishes for practitioners.