Back to Blog

301 vs 308 Redirects in Next.js

·3 min read
nextjsseoredirects

Next.js uses 308 Permanent Redirect by default for permanent: true redirects.

Example:

// next.config.js

redirects() {
  return [
    {
      source: "/about",
      destination: "/",
      permanent: true
    }
  ]
}

This produces:

HTTP 308 Permanent Redirect

HTTP Semantics

| Status | Meaning | Method behaviour | | ------ | ------------------ | ----------------- | | 301 | Permanent redirect | May change method | | 308 | Permanent redirect | Method preserved |

The key difference is method preservation.

Example:

POST /login

If redirected with 301, some clients convert the request to:

GET /login

With 308, the method remains:

POST /login

For this reason frameworks (Next.js, Cloudflare, Vercel) prefer 308.


Where SEO Issues Actually Appear

The problem is rarely the 308 status code itself.

The problem is redirect chains created by routing configuration.

Example commonly seen in Next.js deployments:

/about
  ↓
308
  ↓
/about/
  ↓
308
  ↓
/

This can happen due to a combination of:

  • trailingSlash
  • next.config.js redirects
  • Vercel platform redirects
  • canonical tag pointing elsewhere

Googlebot now observes:

URL → redirect → redirect → final page

Search Console may report:

Page with redirect

or

Alternate page with proper canonical

Google Behaviour

Google officially states:

301 and 308 are treated similarly for indexing.

However, the crawler still prefers minimal redirect paths.

Recommended structure:

URL → final page

or

URL → single redirect → final page

Multiple redirects introduce crawl inefficiency and reduce indexing priority.


Practical Guidance for Next.js

Use 308 when redirecting requests where the HTTP method matters.

Typical examples:

  • API routes
  • form submissions
  • auth flows

Use 301 when the redirect is purely URL restructuring:

/blog/post → /posts/post
/about → /
/old-page → /new-page

The key goal is eliminating redirect chains, not replacing 308 globally.


Debugging Redirect Issues

Check the full redirect chain:

curl -I https://example.com/about

or

curl -L -I https://example.com/about

Look for:

  • multiple redirects
  • trailing slash loops
  • canonical pointing to a different URL

Common Next.js Redirect Trap

Trailing slash configuration can silently introduce redirects.

// next.config.js
module.exports = {
  trailingSlash: true
}

This may cause:

/about → /about/

When combined with manual redirects, chains appear easily.


Summary

308 is not an SEO problem.

Redirect chains are.

Next.js simply makes them easier to create accidentally.