What is Next.js in Sitecore JSS?

The “JavaScript frameworks” mentioned above include React, Vue, Angular, React Native (though experimental at time of writing), and Next.js (with Sitecore version 10).

Next.js is a framework built on top of React. It aims to help developers create production-ready applications with minimal need for configuration and boilerplate code.

Due to the way Next.js extends the React framework, there are some key differences in the way Sitecore JSS projects using the two are set up.

Server-side rendering

One of the biggest differences is that server-side rendering is handled by Next.js, as opposed to using a configurable boilerplate in React. Also, in terms of fetching data Next.js has multiple ways of being configured:

• --fetchWith flag can be used when setting up in order to set a preference for the way the Sitecore Layout and dictionary data can be REST or GraphQL

• --prerender flag can be used to specify the Next.js pre-rendering form of the primary path route. This can be either SSR (server-side rendering) or SSG (static site generation)

Code splitting

Code splitting is done using the Next.js framework. In a traditional JSS and React build, it can be achieved. Whereas with Next.js, that is done with the framework’s “dynamic” module - nothing appears to be set up out of the box, however. The “dynamic” module allows for components to be imported dynamically and reduce the overall size of JavaScript files loaded over the network.

Analytics

Another difference is the way Sitecore analytics is set up for the various frameworks. In order for those to be configured, the Next.js application using the REST fetch method must be utilised. This means that when setting up a JSS application using Next.js, certain flags must be used in order to get the correct configuration (though the app can also be updated at a later time).

Sitecore Container template

An additional Sitecore Container template is supported for Next.js applications. It's used for creating a 'Sitecore-first', full-stack project. The Sitecore Container template is built with Docker, JSS for Next.js and Sitecore Content Serialisation.

Image optimisation

Image optimisation in Sitecore can be handled via a module called Dianoga.

Dianoga helps reduce the size of images served from Sitecore by 8-70% automatically. The way it works is by running an image optimisation on the image data immediately after it's placed in the Sitecore media cache. Next.js offers image optimisation in its image component next/image. It's an extension of the HTML img element with a variety of built-in performance optimisations to help achieve good Core Web Vitals, which are factored into Google’s search rankings.

Some of the optimisation offered by Next.js include:

• Improved performance: Always serve correctly sized images for each device, using modern image formats

• Visual stability: Prevent Cumulative Layout Shift (CLS) automatically

• Faster page loads: Images are only loaded when they enter the viewport, with optional 'blur-up' placeholders

• Asset flexibility: On-demand image resizing, even for images served from remote servers

Customising the document head

Due to the way these FE frameworks are added to the body of the page, a module is necessary in order to access and manipulate the head tag of the page. Next.js offers its own module for appending elements to the head tag of the page. It works in a similar way to the “Helmet” module for React though “next/head” is built-in and is available as part of the base setup.

Routing

Next.js provides an out-of-the-box routing handler, which is different to handling routing in React. This affects mostly projects that are looking to switch from a React based template to a Next.js one.

Hosting

There are also some notable differences when hosting a Next.js application. The way a React JSS application is server-side hosted is via a JSS proxy.

It’s done using a Node.js server and a sitecore-jss-proxy NPM package. When it comes to hosting a Next.js headless server-side rendering, the JSS proxy isn't needed, (nor is it compatible). Additionally, production hosting of Next.js JSS applications in integrated mode is not supported. Next.js JSS apps can be hosted on any environment that supports Node.js.

Working with Codehouse

Our Sitecore Certified Sitecore development team are constantly looking at ways to improve the development process and the user experience. We work on exciting design and build projects often on digital experience systems like Sitecore. Get in touch to find out more.

Read about Promises and Async Programming