How do you implement a multisite setup with Sitecore and Next.js, with a Sitecore First Approach? Do we need to create separate Next.js apps for each site or we can we configure it in the same default Next.js app? Which one is the preferred?
This depends entirely on your requirements.
- Separate applications would enable you to develop, deploy, and scale sites independently. Components and other code could be shared via npm packages.
- A shared, multi-site application could save cost via easier deployment and less infrastructure.
Next.js can now support multi-site applications in the same "rendering host" for both SSG (
getStaticProps) and SSR (
- For SSG, as of Next.js 12 you can use middleware to map that host name to a Sitecore site name, and alter the incoming URL path to a page route which includes the site name as a route parameter. That site name could then be passed to the Layout Service. Example here.
- For SSR, you can find the current host name in
req.headers.hostand map it to a Sitecore site name, which you pass to the Layout Service. Example here.