@spoolcms/nextjs/examples/middleware-redirects-example.ts

The beautiful headless CMS for Next.js developers

// Example: Using Spool redirects in middleware.ts
// This shows how to handle dynamic redirects at runtime

import { NextRequest, NextResponse } from 'next/server';
import { createSpoolRedirectMiddleware } from '@spoolcms/nextjs';

// Create the Spool redirect middleware
const handleSpoolRedirects = createSpoolRedirectMiddleware();

export async function middleware(request: NextRequest) {
  const pathname = request.nextUrl.pathname;
  
  // Skip API routes and static files
  if (
    pathname.startsWith('/api/') ||
    pathname.startsWith('/_next/') ||
    pathname.includes('.')
  ) {
    return NextResponse.next();
  }
  
  // Handle Spool redirects first
  const redirectResponse = await handleSpoolRedirects(request);
  if (redirectResponse) {
    console.log(`🔀 Redirecting: ${pathname} → ${redirectResponse.headers.get('location')}`);
    return redirectResponse;
  }
  
  // Your custom middleware logic here...
  
  // Example: Redirect mobile users to mobile app
  const userAgent = request.headers.get('user-agent') || '';
  const isMobile = /Mobile|Android|iPhone/i.test(userAgent);
  
  if (isMobile && pathname === '/desktop-app') {
    return NextResponse.redirect(new URL('/mobile-app', request.url));
  }
  
  // Example: A/B testing redirects
  if (pathname === '/landing') {
    const variant = Math.random() > 0.5 ? 'a' : 'b';
    return NextResponse.redirect(new URL(`/landing-${variant}`, request.url));
  }
  
  // Continue to the page
  return NextResponse.next();
}

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     */
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
};

/*
Benefits of using middleware for redirects:

✅ Real-time updates: Changes in Spool admin take effect immediately
✅ Complex patterns: Handle advanced redirect logic
✅ Dynamic conditions: Redirect based on user agent, location, etc.
✅ A/B testing: Implement redirect-based experiments
✅ Maintenance mode: Redirect all traffic during maintenance

Performance considerations:

- Middleware runs on every request, so there's a small overhead
- Consider caching redirects in memory for high-traffic sites
- Use build-time redirects (next.config.js) for simple, static redirects
- Use middleware for complex, dynamic redirect patterns

Example redirects you might create in Spool admin for middleware:

1. Complex wildcard patterns:
   Source: /blog/*/comments/*
   Destination: /discussions/*

2. Conditional redirects:
   Source: /mobile-only/*
   Destination: /desktop-alternative/*

3. Temporary redirects:
   Source: /maintenance
   Destination: /coming-soon
*/