Sitecore JSS for Next.js differences from JSS for React, Angular, and Vue.js

Current version: 20.x

The Next.js SDK for Sitecore has some important differences from other Sitecore JavaScript SDKs.

Architecture and deployment

Next.js provides built-in options for build time and runtime static generation (SG).

Out of the box, the Next.js SDK does not support Sitecore tracking or personalization with SG or Sitecore Experience Edge for XM.

You do not have to use the Headless SSR Proxy for production deployment because Next.js natively supports server-side rendering (SSR), as well as SG and incremental static generation, configuring rewrites, and proxying.

You can integrate Sitecore tracking and analytics in a JSS Next.js app if you use SSR and the Sitecore Layout Service REST API.

Integration with advanced Sitecore editors, such as Experience Editor or Horizon, does not require a separate deployment and only supports the HTTP Rendering Engine.

You do not have to install Node.js on your Sitecore Content Management server.

You do not have to deploy your application to the Sitecore Content Management role.

Development

When developing JSS applications with JSS for Next.js there is less boilerplate code than for other framework-specific Sitecore JavaScript SDKs.

The Next.js sample has the following characteristics:

  • It has a simplified component filesystem structure.

  • Because Next.js supports Typescript, the sample app uses Typescript by default.

  • It includes code generation for GraphQL schema types.

  • It can be created based on a containerized template. The template is optimized for the Sitecore-first workflow.

Specifically, when working with JSS for Next.js remember the following:

  • Do not use the JSS CLI commands jss deploy app or jss deploy files.

  • Use jss deploy items for code-first item import.

  • You do not have to configure a sitecoreDistPath in your package.json file.

  • The Link and RichText field helper components support client-side routing out of the box.

  • If you add .graphql files to your solution or make changes to your Sitecore data model (templates), you must update GraphQL introspection.

  • The Next.js app is configured to proxy Sitecore media requests. Therefore, the Layout Service excludes server URLs.

Do you have some feedback for us?

If you have suggestions for improving this article,