Simplifying Redirect Management in Sitecore XM Cloud with Next.js and Vercel Edge Config

As organizations continue their journey toward composable and headless architectures, the way we manage even simple things like redirects evolves too. Redirects are essential for SEO and user experience, but managing them within a CMS often introduces unnecessary complexity. In this blog, I will share how we streamlined redirect management for a Sitecore XM Cloud + Next.js implementation using Vercel Edge Config  – a modern, edge-based approach that improves performance, scalability, and ease of maintenance.

Why Move Redirects Out of Sitecore?

Traditionally, redirects were managed within Sitecore through redirect items stored in the Content Tree. While functional, this approach introduced challenges such as scattered items, and added routing overhead. With Sitecore XM Cloud and Next.js, we now have the opportunity to offload this logic to the frontend layer – closer to where routing happens. By using Vercel Edge Config, redirects are processed at the edge, improving site performance and allowing instant updates without redeployments.

By leveraging Vercel Edge Config and Next.js Middleware, redirects are evaluated before the request reaches the application’s routing or backend systems. This approach ensures:

1. Redirects are processed before routing to Sitecore.
2. Updates are instant and do not require deployments.
3. Configuration is centralized and easily maintainable.

The New Approach: Redirects at the Edge

In the new setup:

1. Redirect rules are stored in Vercel Edge Config in JSON format.
2. Next.js middleware runs at the edge layer before routing.
3. Middleware fetches redirect rules and checks for matches.
4. Matching requests are redirected immediately – bypassing Sitecore.
5. Non-matching requests continue to the standard rendering process.

Technical Details and Implementation

Edge Config Setup in Vercel

Build an AI-First Enterprise

From early pilots to enterprise-wide deployment, our award-winning AI consulting and technical services help you build the right foundation, scale responsibly, and deliver meaningful business outcomes.

Learn More

Redirect rules are stored in Vercel Edge Config, a globally distributed key-value store that allows real-time configuration access at the edge. In Vercel, each project can be linked to one or more Edge Config stores.

You can create edge config stores at project level as well as at account level. In this document, we will be creating the store at account level and this edge config store will be shared across all the projects within the account.

Steps:

1.  Open the Vercel Dashboard.
2. Go to Storage -> Edge Config.
3. Create a new store (for example: redirects-store).
   
4. Add a key named redirects with redirect data in JSON format.
   Example JSON structure:

   {
     "redirects": {
       "/old-page": {
         "destination": "/new-page",
         "permanent": true
       },
       "/old-page/item-1": {
         "destination": "/new-page./item-1",
         "permanent": false
       }
     }
   }

5. To connect your store to a project, navigate to Projects tab and click on Connect Project button.

6. Select the project from the dropdown and click Connect.
   

7. Vercel automatically generates a unique Edge Config Connection String for your project which is stored as an environment variable in your project. This connection string securely links your Next.js app to the Edge Config store. You can choose to edit the environment variable name and token name from the Advanced Options while connecting a project.

8. Please note that EDGE_CONFIG environment that is added by default (if you do not update the name of the env. variable as mentioned in step #7). This environment variable is automatically available inside the Edge Runtime and used by the Edge Config SDK.

Implementing Redirect Logic in Next.js Middleware

1. Install the Vercel Edge Config SDK to fetch data from the Edge Config store:

   npm install @vercel/edge-config

   The SDK provides low-latency, read-only access to configuration data replicated across Vercel’s global edge network. Import the SDK and use it within your middleware to fetch redirect data efficiently.

2. Middleware Configuration: All redirect logic is handled in the middleware.ts file located at the root of the Next.js application. This setup ensures that every incoming request is intercepted, evaluated against the defined redirect rules, and redirected if necessary – before the request proceeds through the rest of the lifecycle.Code when using single store and the default env. variable EDGE_CONFIG

   import { NextResponse } from 'next/server';
   import type { NextFetchEvent, NextRequest } from 'next/server';
   import { get } from '@vercel/edge-config';
   
   export async function middleware(req: NextRequest, ev: NextFetchEvent) {
     try {
       const pathname = req.nextUrl.pathname;
   
       // Normalize the pathname to ensure consistent matching
       const normalizedPathname = pathname.replace(/\/$/, '').toLowerCase();
   
       // Fetch redirects from Vercel Edge Config using the EDGE_CONFIG connection
       const redirects = await get('redirects');
   
       const redirectEntries = typeof redirects === 'string' ? JSON.parse(redirects) : redirects;
   
       // Match redirect rule
       const redirect = redirectEntries[normalizedPathname];
   
       if (redirect) {
         const statusCode = redirect.permanent ? 308 : 307;
         let destinationUrl = redirect.destination;
         //avoid cyclic redirects
         if (normalizedPathname !== destinationUrl) {
           // Handle relative URLs
           if (!/^https?:\/\//.test(redirect.destination)) {
             const baseUrl = `${req.nextUrl.protocol}//${req.nextUrl.host}`;
             destinationUrl = new URL(redirect.destination, baseUrl).toString();
           }
           return NextResponse.redirect(destinationUrl, statusCode);
         }
       }
   
       return middleware(req, ev);
     } catch (error) {
       console.error('Error in middleware:', error);
       return middleware(req, ev);
     }
   }
   
   export const config = {
     /*
      * Match all paths except for:
      * 1. /api routes
      * 2. /_next (Next.js internals)
      * 3. /sitecore/api (Sitecore API routes)
      * 4. /- (Sitecore media)
      * 5. /healthz (Health check)
      * 6. all root files inside /public
      */
     matcher: ['/', '/((?!api/|_next/|healthz|sitecore/api/|-/|favicon.ico|sc_logo.svg|throw/).*)'],
   };

   Code when using multiple stores and custom environment variables. In this example, there are two Edge Config stores, each linked to its own environment variable: EDGE_CONFIG_CONSTANT_REDIRECTS and EDGE_CONFIG_AUTHORABLE_REDIRECTS. The code first checks for a redirect in the first store, and if not found, it checks the second. An Edge Config Client is required to retrieve values from each store.

   import { NextRequest, NextFetchEvent } from 'next/server';
   import { NextResponse } from 'next/server';
   import middleware from 'lib/middleware';
   import { createClient } from '@vercel/edge-config';
   
   export default async function (req: NextRequest, ev: NextFetchEvent) {
     try {
       const pathname = req.nextUrl.pathname;
   
       // Normalize the pathname to ensure consistent matching
       const normalizedPathname = pathname.replace(/\/$/, '').toLowerCase();
   
       // Fetch Redirects from Store1
       const store1RedirectsClient = createClient(process.env.EDGE_CONFIG_CONSTANT_REDIRECTS);
       const store1Redirects = await store1RedirectsClient .get('redirects');
   
       //Fetch Redirects from Store2
       const store2RedirectsClient = createClient(process.env.EDGE_CONFIG_AUTHORABLE_REDIRECTS);
       const store2Redirects = await store2RedirectsClient.get('redirects');
   
       let redirect;
   
       if (store1Redirects) {
         const redirectEntries =
           typeof store1Redirects === 'string'
             ? JSON.parse(store1Redirects)
             : store1Redirects;
   
         redirect = redirectEntries[normalizedPathname];
       }
   
       // If redirect is not present in permanent redirects, lookup in the authorable redirects store.
       if (!redirect) {
         if (store2Redirects) {
           const store2RedirectEntries =
             typeof store2Redirects === 'string'
               ? JSON.parse(store2Redirects)
               : store2Redirects;
   
           redirect = store2RedirectEntries[normalizedPathname];
         }
       }
   
       if (redirect) {
         const statusCode = redirect.permanent ? 308 : 307;
         let destinationUrl = redirect.destination;
   
         if (normalizedPathname !== destinationUrl) {
           // Handle relative URLs
           if (!/^https?:\/\//.test(redirect.destination)) {
             const baseUrl = `${req.nextUrl.protocol}//${req.nextUrl.host}`;
             destinationUrl = new URL(redirect.destination, baseUrl).toString();
           }
           return NextResponse.redirect(destinationUrl, statusCode);
         }
       }
   
       return middleware(req, ev);
     } catch (error) {
       console.error('Error in middleware:', error);
       return middleware(req, ev);
     }
   }
   
   export const config = {
     /*
      * Match all paths except for:
      * 1. /api routes
      * 2. /_next (Next.js internals)
      * 3. /sitecore/api (Sitecore API routes)
      * 4. /- (Sitecore media)
      * 5. /healthz (Health check)
      * 6. all root files inside /public
      */
     matcher: [
       '/',
       '/((?!api/|_next/|healthz|sitecore/api/|-/|favicon.ico|sc_logo.svg|throw/).*)',
     ],
   };

Summary

With this setup:

• The Edge Config store is linked to your Vercel project via environment variables.
• Redirect data is fetched instantly at the Edge Runtime through the SDK.
• Each project can maintain its own independent redirect configuration.
• All updates reflect immediately – no redeployment required.

Points to Remember:

• Avoid overlapping or cyclic redirects.
• Keep all redirects lowercase and consistent.
• The Edge Config connection string acts as a secure token – it should never be exposed in the client or source control.
• Always validate JSON structure before saving in Edge Config.
• A backup is created on every write, maintaining a version history that can be accessed from the Backups tab of the Edge Config store.
• Sitecore-managed redirects remain supported when necessary for business or content-driven use cases.

Managing redirects at the edge has made our Sitecore XM Cloud implementations cleaner, faster, and easier to maintain. By shifting this responsibility to Next.js Middleware and Vercel Edge Config, we have created a more composable and future-ready approach that aligns perfectly with modern digital architectures.

At Perficient, we continue to adopt and share solutions that simplify development while improving site performance and scalability. If you are working on XM Cloud or planning a headless migration, this edge-based redirect approach is a great way to start modernizing your stack.