Next.js Course
Next.js
/
Beginner

Redirects

Definition

Forcefully navigating a user from one URL to another, either via `next.config.js` (static) or Middleware/Server Actions (dynamic).

Explain Like I'm New

A user types `/old-blog` into their browser. You deleted that page and moved it to `/new-blog`. A redirect instantly pushes them to the new URL so they don't get a 404 Error page.

Real World Example

When a company rebrands and changes their domain structure, they use 301 (Permanent) redirects to ensure all old Google Search links instantly point to the new website.

Common Use Cases

  • •SEO preservation
  • •Authentication gates
  • •Legacy URL support

Interactive Example

Loading...
Console output will appear here...

Interview Questions

basic

  • What is the difference between a 301 and a 302 redirect?

intermediate

  • How do you trigger a redirect from within a Next.js Server Action after a successful form submission?

Flash Cards

Question

301 vs 302?

Click to reveal answer
Answer

301 is Permanent (tells Google 'I moved forever, update your search results'). 302 is Temporary (tells Google 'I moved for today, but keep the old link in your search results').

Question

Server Action redirect?

Click to reveal answer
Answer

By importing and calling the `redirect('/new-url')` function from `next/navigation`.