Mapping request paths using Next.js
Rewrites allow you to map a request path to a different destination as a URL proxy (masking the destination path, without changing the User’s location at all). In contrast, redirects will reroute you to a new page fully disclosing the destination URL.
Both of them are async functions that return at least an array of objects that require the following key-value pairs:
permanent (only for redirects). Rewrites can be incredibly useful to temporarily map old paths:
/new-blog/:slug ensuring there are no broken links in your application. However, let's say if you'd want to map
/github to your GH profile. Here, you'd use a redirect instead.
Vercel also offers a solution for redirects and rewrites within their
vercel.json Project config file. Here, redirects and rewrites are framework agnostic. You can use them with any framework supported on their platform. However, in case of a Next.js application, Vercel recommends framework level redirects as they do have precedence over platform level redirects. Here's Lee Rob's project config file.
What about subdomains?
With subdomains such as
subdomain.domain.com, Vercel explains this incredibly easy (here's their redirecting subdomain guide). In short, let's say you want to rewrite
acme.com/app, you'll need to configure a rewrite making use of the
Originally published: Mapping request paths using Next.js