Redirects & Rewrites

Next.js supports redirects and rewrites configured in next.config.js.

Redirects change the URL in the browser and send the user to a different location. They're useful for:

Moving content to new locations
Forwarding users to external sites
Creating URL aliases with SEO-friendly permanent redirects

Rewrites proxy the request to a different path without changing the URL in the browser. They're useful for:

Creating cleaner URLs that map to complex paths
API endpoint aliases
Migrating from old URL structures without breaking links

This site demonstrates both with several examples you can try below.

Try Redirects

These links will redirect you to a different URL (notice the URL change in your browser):

Try Rewrites

These links use rewrites to show different content while keeping the URL (notice the URL stays the same):

Redirects

// next.config.js
redirects() {
  return [
    {
      source: '/docs',
      destination: 'https://docs.netlify.com/frameworks/next-js/overview/',
      permanent: false, // Temporary (307)
    },
    {
      source: '/old-blog/:slug',
      destination: '/classics',
      permanent: true, // Permanent (308)
    },
    {
      source: '/github',
      destination: 'https://github.com/netlify-templates/next-platform-starter',
      permanent: false,
    },
    {
      source: '/home',
      destination: '/',
      permanent: true,
    },
  ];
}

Rewrites

// next.config.js
rewrites() {
  return [
    {
      source: '/api/health',
      destination: '/quotes/random', // Proxies to the quotes API
    },
    {
      source: '/blog',
      destination: '/classics', // Shows classics content under /blog URL
    },
  ];
}