Tracking & Analytics Overview and Architecture
Full Sitecore analytics and personalization functionality is possible with Next.js on any SSR (Server-side Rendered) page route.
Note client-side JSS tracking is possible for both SSG and SSR.
By default, the Next.js sample application uses a route optimized for SSG, but can be switched to SSR. See here for steps.
For Sitecore analytics and personalization to work with JSS, the appropriate HTTP headers must be present at the browser and Layout Service.
You can learn more about about Sitecore analytics and personalization with JSS here.
With Next.js, this is accomplished by passing specific HTTP headers between the (browser-initiated) page request/response and the (server-side-initiated) Layout Service request/response. This process is referred to as header passing in this topic.
Header Passing
Here's how header passing works during a page request/response cycle. The flow is based on using the SSR page route example pages_examples\[[...path]].SSR.tsx that comes with the Next.js sample application.
The page request/response is sent through getServerSideProps on the Next.js SSR route and ultimately is passed along to the RestLayoutService.
The RestLayoutService (part of the @sitecore-jss/sitecore-jss-nextjs npm package) is responsible for making the Layout Service request to fetch layout data but also for coordinating the header passing. The following headers are involved in the transfer.
Request (Page -> Layout Service)
cookieuser-agentrefererX-Forwarded-For
Response (Page <- Layout Service)
set-cookie
Configuration
The Next.js sample application includes all configuration necessary to start using Sitecore analytics and personalization with Next.js SSR. However, additional steps may be required. Refer to Enabling tracking and analytics for details.