Optimizing Dynamic Routing in Amazon CloudFront Using Lambda@Edge for Next.js Applications

Deploying a Next.js application on AWS often requires handling dynamic routes that don’t exist as static assets in an S3 bucket. Amazon CloudFront, by default, serves static content but doesn't support dynamic route resolution out-of-the-box. This is where Lambda@Edge becomes crucial for enabling SEO-friendly and performant dynamic routing.

💡 The Challenge with Dynamic Routes in CloudFront

Next.js applications often rely on dynamic routing (e.g., /blog/[slug], /product/[id]) that’s handled client-side or on the server during SSR (Server-Side Rendering). When deployed to AWS S3 and served via CloudFront, these dynamic routes return a 403 or 404 error because the file doesn’t physically exist.

🛠 Solution: Use Lambda@Edge for Request Rewriting

Lambda@Edge allows modifying HTTP requests and responses at CloudFront edge locations. By configuring a Lambda@Edge function at the origin request trigger, incoming requests for dynamic paths can be rewritten to point to index.html, allowing the single-page application to take over routing seamlessly.

✅ Implementation Steps

1. Create a Lambda Function
   Create a Lambda function in the N. Virginia region (us-east-1) since Lambda@Edge requires this region.

2. Add Logic to Handle Dynamic Routes
   The function should inspect the request URI and, if it doesn’t match a static file (like .js, .css, .png, etc.), rewrite it to /index.html.
   
   javascript
   exports.handler = async (event) => {

   const request = event.Records[0].cf.request;

   const uri = request.uri;

  const staticFilePattern = /\.(js|css|png|jpg|jpeg|gif|svg|ico|json|txt|xml|woff|woff2|ttf|eot|otf)$/;

   if (!uri.match(staticFilePattern) && !uri.endsWith('/index.html')) {

     request.uri = '/index.html';

   }

   return request;

};

3. Deploy to Lambda@Edge
   Deploy the Lambda function with the CloudFront trigger for Origin Request. This ensures CloudFront routes all non-static paths to the correct entry point of the Next.js application.

4. Update CloudFront Behavior
   Associate the Lambda function with the default behavior or the desired path pattern in the CloudFront distribution settings.
   
   

🚀 Benefits

• Seamless SPA navigation: Enables clean URLs without hash fragments.
  
  

• Improved SEO: Search engines can better index route-friendly URLs.
  
  

• Enhanced Performance: Offloading routing to the edge minimizes latency.
  
  

🧩 Optional Enhancements

• Implement more specific path handling (e.g., serve /404.html for unmatched routes).
  
  

• Add logging or custom headers for analytics and debugging.
  
  

• Combine with caching strategies to reduce origin hits.