2

Was anyone able to get wildcard pages working with a multisite Next.js head? All solutions I have seen just assume that your head is for a single site so there is no need for the multisite middleware.

The "solutions" suggest you add your wildcard path to the middleware matcher (as an exception) which basically will skip all middleware processing including the multisite plugin.

Has anyone tried to solve this by letting the generic catch all [[...path]] handle the wildcard pages and have some extra logic there? OR is the "solution" to abandon multisite in Next.js and just serve one site per Next.js head to get around the problem?

2 Answers 2

0

You can modify getStaticProps function inside [[...path]].tsx file to resolve wildcard items. With the help of GraphQL, path of the item to be resolved on CMS can be fetched and context path can be set inside this function to resolve to this item, when the wildcard page is accessed.

context.params.path =  /_site_<site_name>/{{ItemPath_CMS}} // Call to GraphQL to set the item path to be resolved.

Note: The structure of the rewrite path on the next js multisite middleware is resolved as /_site_<site_name>/<path>, hence the context path is set to include site name as well.

More details can be found here.

https://sitecorefoundation.in/bucketed-items-in-sitecore-headless/

Hope this helps!!!

1
  • 1
    This is roughly my solution as well. Not putting the wildcard url in the exclusions for the middlware, so site resolution still works and have extra code in the catch all [[...path]] to deal with product IDs (in our case) there. Make the relevant information available in the context so that it's there for all components when they are being rendered. Commented Jul 10 at 23:07
0

Have you tried out the recommended guidelines from the Sitecore Developer Portal? https://developers.sitecore.com/learn/accelerate/xm-cloud/implementation/information-architecture/wildcard-pages

It has a section specifically about Multisite. I'm not sure if this is the solution you were referencing in your question?

When using the multisite application, we need to make sure that the middleware does not override the route, so the root path needs to be added to the matcher for the middleware config found in the root of the application. It is important to note, this will prevent all middleware running on these paths, so if you need to add dynamic redirects later, a different solution will need to be found.

middleware.ts

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. all root files inside /public (e.g. /favicon.ico)
   */
  matcher: ['/', '/((?!api/|_next/|blogs/|sitecore/api/|-/|[\\w-]+\\.\\w+).*)'],
};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.