How to Fix Trailing Slash Redirect Loops in Next.js App Router
Fix 308 redirect loops and infinite canonical slash issues in Next.js App Router. Clean next.config.mjs configuration and middleware regex redirect patterns.
Displayed below main page header or above the tool container. • Zero CLS Container
Automate & Test This in Our Free Tool
Eliminate syntax errors and test live URLs client-side using our dedicated Redirect Rule & Regex Mapper.
The Technical Problem & Root Cause
When configuring trailing slash normalization in Next.js, setting trailingSlash: true in next.config.mjs while also handling path rewrites, reverse proxies (Cloudflare / AWS CloudFront), or custom middleware redirects can trigger cyclical 308 Permanent Redirect loops (e.g., /blog -> /blog/ -> /blog). This breaks search bot crawlers, triggers redirect error penalties in Google Search Console, and crashes client navigation.
ERR_TOO_MANY_REDIRECTS: The page at https://example.com/docs was redirected too many times. HTTP/1.1 308 Permanent Redirect -> Location: /docs/ HTTP/1.1 308 Permanent Redirect -> Location: /docs
Production-Grade Solution & Code Snippet
Copy and paste this verified configuration directly into your project:
// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
// Enforce standard no-trailing-slash URL policy across App Router
trailingSlash: false,
skipTrailingSlashRedirect: true, // Prevents default internal redirect race conditions
async redirects() {
return [
{
// Explicitly strip trailing slashes for clean canonical URLs
source: '/:path+/',
destination: '/:path+',
permanent: true, // 308 permanent redirect
},
];
},
};
export default nextConfig;Step-by-Step Implementation Walkthrough
11. Audit next.config.mjs Configuration
Set trailingSlash: false and configure skipTrailingSlashRedirect: true if you are managing edge redirects via middleware or Cloudflare Page Rules.
22. Standardize Canonical Tags in Root Layout
Ensure your App Router metadata alternates.canonical always uses a consistent slash policy without query parameters or trailing slashes.
33. Prevent Middleware Path Mutation Loops
When using NextResponse.redirect in middleware.ts, always check if request.nextUrl.pathname already matches the target destination to avoid self-referential redirect responses.
44. Synchronize Edge Proxy / CDN Cache Rules
If using Cloudflare or AWS CloudFront in front of Vercel/Next.js, ensure edge URL normalization matches your Next.js trailing slash policy.
Separates the interactive tool output from the deep technical guide. • Zero CLS Container
- Combining trailingSlash: true with reverse proxy origin stripping causes infinite 308 ping-pong loops.
- Client-side Link components with trailing slashes triggering unexpected hard SSR full-page refreshes.
- Middleware redirecting internal _next/static or API routes into 308 redirects, breaking client asset bundles.
- Query strings (?utm_source=...) being stripped or duplicated during trailing slash normalization.
Frequently Asked Questions
Does Google prefer URLs with or without trailing slashes?▼
Google treats https://example.com/page and https://example.com/page/ as two distinct URLs. Neither format provides a direct algorithmic ranking advantage, but consistency is critical: choose one standard and enforce a permanent 301/308 redirect + matching canonical tag across the site.
Why does Next.js use 308 instead of 301 for redirects?▼
HTTP 308 (Permanent Redirect) preserves the original HTTP request method (GET, POST, PUT) and request body across the redirect, unlike legacy 301 redirects where browsers historically converted POST requests to GET requests.
How does Cloudflare / Vercel edge caching affect trailing slash redirects?▼
Edge caches can cache the 308 redirect response. If you change your trailingSlash config in Next.js, purge the Cloudflare / Vercel edge cache immediately to prevent returning cached redirect loops to search engine bots.
Related Tools & Next Workflow Steps
Complementary utilities to streamline your SEO audit, indexing, and content strategy.
Bulk Canonical Normalizer & Auditor
Audit raw URLs in bulk, strip tracking parameters (UTMs/gclid), enforce trailing slash rules, and detect duplicate content risks.
XML Sitemap Generator & Validator
Generate standard XML sitemaps from URL batches, customize crawl priorities, and validate existing sitemap XML client-side.
Robots.txt Generator & Validator
Generate, test, and validate standard-compliant robots.txt files with live syntax checking, multi-user-agent rules, and sitemap directives.
Canonical URL Builder
Build self-referential and cross-domain canonical link tags to unify Google ranking signals and prevent duplicate content penalties.
Displayed below main page header or above the tool container. • Zero CLS Container