Rewrites

Definition

Masking a destination URL while keeping the user on the original requested URL.

Explain Like I'm New

A Redirect changes the URL in the user's browser bar. A Rewrite secretly fetches data from somewhere else, but keeps the browser URL looking exactly the same. It's a proxy.

Real World Example

Your Next.js app is at `mycompany.com`. You have a totally separate WordPress blog at `blog.wp-hosting.com`. You use a Rewrite so that when a user visits `mycompany.com/blog`, Next.js secretly fetches the WordPress site and shows it, making it look like one seamless website.

Common Use Cases

•Incremental adoption/migration
•Proxying external APIs to avoid CORS errors

Interactive Example

Console output will appear here...

Interview Questions

basic

Does a Rewrite change the URL displayed in the user's browser?

intermediate

How can Rewrites solve CORS (Cross-Origin Resource Sharing) errors?

Flash Cards

Question

Change URL?

Click to reveal answer

Answer

No. The user is completely unaware that the content was fetched from a different destination.

Question

Solve CORS?

Click to reveal answer

Answer

CORS only affects browsers trying to talk to external domains. A Next.js Rewrite happens on the Server. The browser talks to your Next.js server (same domain, no CORS), and your server talks to the external API.