Sitecore Headless SXA — configuring the new OOTB Redirect Module with Next.JS

Want to use the shiny new built-in Redirects mechanism in your Headless SXA on Next.JS? Read on!

The Sitecore 10.3 Release Notes say “You can now redirect a specific page to a new location, or create a redirect map for your headless sites.” Sounds great! But the linked documentation only shows how to configure it in the CMS. What about configuring it on the Next.JS side? That’s not currently documented, so I will help you configure it.

1. You’re going to need to be on at least JSS 21 and at least Sitecore 10.3 or Sitecore XM Cloud. The feature did exist in JSS 20 but has had performance and multi-site improvements in JSS 21.
2. Add the Redirects Module to your Headless SXA Tenant and Site.
3. Set up a couple of tests for both 301 and 302.

4. Use the JSS App Initializer to create your nextjs app, and then add on the nextjs-sxa template.

5. If you’re upgrading from an older version of JSS then you might not have the new redirects middleware configured. The nextjs-sxa template from the above app initializer will contain the files you need:

• \src\middleware.ts
• \src\lib\middleware\index.ts
• \src\lib\middleware\plugins\redirects.ts

Also make sure the files in \scripts are up to date.

6. Run your app in Production mode, or you can go to \src\lib\middleware\plugins\redirects.ts and update disabled: () => false so that it runs in Connected mode.

7. Open your browser and check that the test redirects you set up are correct.

Thanks for reading!