Skip to main content

Troubleshooting the Next.js Multisite add-on

Abstract

Investigate and resolve issues in Next.js apps with the Multisite add-on.

This topic describes common issues with the Next.js Multisite add-on and explains possible solutions.

Debug the site resolution

If the resolved site for a given domain is not as expected, you can troubleshoot with the help of JSS debugging tools.

To enable debugging for the Multisite add-on:

  1. Turn on debug logging for multisite by enabling the sitecore-jss:multisite namespace.

  2. If necessary, increase the debug depth using the DEBUG_DEPTH environment variable.

With debug logging enabled, you can see the site information fetched from Sitecore during the app bootstrap phase. The SiteResolver uses this information to determine the site based on the hostname.

You can also see MultisiteMiddleware debug trace logging that shows detailed information for each request, including the resolved site name.

Resolve CORS errors for Next.js assets

When using hosting services other than Vercel, you might experience Cross-Origin Resource Sharing (CORS) errors for Next.js asset requests (<mysite>/_next/static/<path>).

To resolve CORS errors for Next.js assets:

  1. Check that you have set the PUBLIC_URL environment variable. This variable is required for integration with Sitecore editors (without it, relative Next.js asset requests fail in Pages/Experience Editor).

  2. Ensure all domains used in your multisite configuration have access to the domain used for the PUBLIC_URL variable, for example, by using the Access-Control-Allow-Origin header.

Note

This issue does not affect applications deployed on Vercel because Vercel deployments use the VERCEL_URL environment variable as the public URL. The VERCEL_URL is generated on deployment, and all origins can access it.