← Back to Guides

How to Optimize Next.js + Sitecore JSS

This guide covers performance and usage considerations when building and deploying your Next.js and Sitecore JSS application.
Last updated on March 4, 2025
Databases & CMS

This guide and checklist focuses on key performance and usage optimizations for Next.js and Sitecore JSS web applications deployed on Vercel, including:

For detailed information, refer to Sitecore JSS documentation and Vercel Next.js documentation.

Fluid compute combines serverless flexibility with server-like capabilities. It optimizes resource allocation automatically, potentially improving performance during traffic spikes and reducing costs. Some Sitecore customers have seen more than 45% in compute savings by enabling fluid compute.

Edge Middleware optimization improves performance and reduces Vercel Edge Middleware and Vercel Functions costs. This is particularly important for Next.js with Sitecore JSS, as several Sitecore-specific middleware plugins fetch data from Sitecore at request time. Below are important considerations if you are using Sitecore's middleware plugins or have implemented custom middleware in Next.js. As a general rule, if you find that middleware is not necessary for your Sitecore implementation or specific project requirements, remove it.

  • Avoid asynchronous fetch calls from middleware. While sometimes unavoidable, asynchronous code adds latency to the middleware function.
  • Review and restrict the default negative middleware matcher so that it applies only to the required routes. By default, this matcher runs on all pages; limiting it reduces middleware invocations and improves frontend performance.
  • Remove the Sitecore redirects middleware plugin if redirects are not managed in Sitecore. This plugin fetches data from Sitecore even if redirects are not present.
  • If redirects are managed for a limited set of paths, restrict the middleware matcher to execute for only those paths.
  • Move permanent and regular expression redirects from Sitecore to next.config.js in Next.js to reduce the size of Sitecore’s redirect map and decrease the middleware execution duration.
  • If you are managing up to a few hundred redirects in Sitecore, consider moving the redirects to Next.js and removing the redirect middleware plugin.
  • If you are managing a few thousand redirects in Sitecore, consider integrating Vercel Edge Config for storing redirects. Pushing redirect data to Vercel Edge Config on publish will enable fast and cost-effective lookups.
  • For applications managing very large stores of redirects in Sitecore, consider implementing a Bloom filter in Vercel Edge Config. This technique ensures fast redirect lookups for more than 65,000 redirects.
  • Remove the Sitecore multisite middleware plugin if multisite functionality is not used. Even though this plugin does not retrieve data from Sitecore at request time, removing it will decrease the middleware execution duration.
  • Consider using one Vercel project per Sitecore site in order to remove the multisite plugin and eliminate associated middleware invocations. This approach will allow domain management to be configured in Vercel.
  • Remove the Sitecore Personalize middleware plugin if you are not integrating personalization from Sitecore. This plugin performs a fetch from middleware even if there is no personalization data and adds latency to middleware.
  • If personalization is limited to a set of paths, restrict the middleware matcher to execute for only those paths.

Incremental Static Regeneration (ISR) and on-demand revalidation are features in Next.js that enable fast static content delivery with dynamic content updates. These capabilities are very valuable when integrating Next.js with Sitecore, allowing for efficient content publishing workflows while maintaining high performance and reducing server load. By leveraging these features, developers can create responsive, up-to-date experiences without sacrificing the benefits of static generation.

  • Extend the revalidation period in [[...page]].tsx beyond the default 5 seconds. A longer period reduces the frequency of regeneration, lowering server load and improving cache hit rates. However, be mindful of content that requires more frequent updates.
  • Implement on-demand revalidation for frequently updated pages. This ensures that important changes are reflected immediately after publishing in Sitecore. Create an Experience Edge webhook via the Experience Edge for XM APIs to trigger revalidation after content has been published and propagated to Sitecore Experience Edge.

Image optimization is critical for improving Core Web Vitals scores. next/image and Vercel's image optimization features can significantly reduce bandwidth usage, minimize Cumulative Layout Shift (CLS), and improve user experience, particularly on mobile devices. Sitecore JSS supports next/image in @sitecore-jss/sitecore-jss-nextjs version 20.1.0 and later.

  • Upgrade to the latest version of @sitecore-jss/sitecore-jss-nextjs that uses next/image with Vercel image optimization. This ensures you're benefiting from the most recent performance improvements.
  • Verify images are rendered with next/image and avoid rendering images from third-party domains. This removes latency due to unnecessary TLS handshakes.
  • Prevent layout shift by ensuring accurate height and width attributes for images from Sitecore.
  • Verify that non-critical images are lazy loaded, which is the default behavior for next/image. This improves initial page load times by deferring the loading of off-screen images.

Font optimization can significantly impact page load times and visual consistency. Using next/font ensures efficient font loading and reduces layout shift. This is important in Sitecore JSS Next.js applications where next/font is not implemented by default.

  • Integrate next/font for all fonts used in your application.
  • For custom or third-party fonts, download the font files locally and use them with next/font. While this approach requires more setup, it provides better performance and reliability compared to loading fonts from other services.
  • Consider using variable fonts with next/font. Variable fonts can reduce the total font file size and improve performance.

next/link is a React component that enables client-side navigation and prefetching to improve performance and user experience with Next.js. Sitecore JSS uses next/link, with prefetching enabled by default.

  • Verify that next/link is used for all internal links.
  • Monitor the impact of next/link prefetching on your Vercel usage. For example, you might consider enabling prefetching for critical pages, and disabling prefetching for infrequently accessed pages to optimize Vercel usage.

Implementing observability is essential for identifying bottlenecks and tracking improvements in Next.js and Sitecore JSS applications. Vercel Speed Insights and Observability Plus are two built-in tools for measuring and diagnosing performance and usage.

In this guide, you explored ways to optimize your Next.js and Sitecore JSS application. By following these best practices, you can create a fast and dynamic frontend application that integrates the flexible content management of Sitecore with the performance, security, and developer experience of Vercel and Next.js.

Couldn't find the guide you need?