--- title: How to Optimize Next.js + Sitecore JSS description: This guide covers performance and usage considerations when building and deploying your Next.js and Sitecore JSS application. url: /kb/guide/how-to-optimize-next.js-sitecore-jss canonical_url: "https://vercel.com/kb/guide/how-to-optimize-next.js-sitecore-jss" last_updated: 2026-07-13 authors: Alex Hawley related: - /docs/frameworks/nextjs - /docs/functions/fluid-compute - /docs/observability - /docs/routing-middleware - /docs/functions - /docs/storage/edge-config - /docs/image-optimization - /docs/speed-insights - /docs/speed-insights/quickstart install_vercel_plugin: npx plugins add vercel/vercel-plugin --- This guide and checklist focuses on key performance and usage optimizations for [Next.js](https://nextjs.org/) and [Sitecore JSS](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/sitecore-javascript-services-sdk--jss-.html) web applications deployed on Vercel, including: - [Fluid Compute](#enable-fluid-compute) - [Routing Middleware](#optimize-routing-middleware) - [Incremental Static Regeneration (ISR) and On-Demand Revalidation](#use-incremental-static-regeneration-isr-and-on-demand-revalidation) - [Optimizing Images with next/image](#optimize-images-with-next/image) - [Optimizing Fonts with next/font](#optimize-fonts-with-next/font) - [Optimizing Navigation with next/link](#optimize-navigation-with-next/link) - [Performance and Usage Observability](#use-performance-and-usage-observability) For detailed information, refer to [Sitecore JSS documentation](https://doc.sitecore.com/xp/en/developers/hd/latest/sitecore-headless-development/jss-and-sitecore-experience-edge-for-experience-manager--xm-.html) and [Vercel Next.js documentation](https://vercel.com/docs/frameworks/nextjs). ## Enable Fluid Compute [Fluid compute](https://vercel.com/docs/functions/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. - [Enable fluid in your Vercel project settings](https://vercel.com/d?to=%2F%5Bteam%5D%2F%5Bproject%5D%2Fsettings%2Ffunctions&title=Enable+Fluid). This enables automatic optimization of your functions for both performance and cost efficiency, with zero configuration. - [Monitor your application’s performance](https://vercel.com/docs/observability#enabling-observability-plus) after enabling fluid compute. Pay close attention to Vercel Function invocations, error rate, GB-hrs saved, start type, and memory usage to understand how it is optimizing your application. ## Optimize Routing Middleware [Routing Middleware](https://vercel.com/docs/routing-middleware) optimization improves performance and reduces Vercel Routing Middleware and [Vercel Functions](https://vercel.com/docs/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. ### Custom Middleware - 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](https://github.com/Sitecore/jss/blob/0a90a403b97540a79f17c2c40c9b961ed22dc5c2/packages/create-sitecore-jss/src/templates/nextjs/src/middleware.ts#L19) 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. ### Redirect Middleware Plugin - Remove the [Sitecore redirects middleware plugin](https://github.com/Sitecore/jss/blob/dev/packages/sitecore-jss-nextjs/src/middleware/redirects-middleware.ts) 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](https://nextjs.org/docs/pages/api-reference/config/next-config-js/redirects) 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](https://vercel.com/docs/storage/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](https://redirects-bloom-filter.vercel.app/) in Vercel Edge Config. This technique ensures fast redirect lookups for more than 65,000 redirects. ### Multisite Middleware Plugin - Remove the [Sitecore multisite middleware plugin](https://doc.sitecore.com/xmc/en/developers/jss/latest/jss-xmc/the-next-js-multisite-add-on.html) 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. ### Personalize Middleware Plugin - Remove the [Sitecore Personalize middleware plugin](https://github.com/Sitecore/jss/blob/dev/packages/sitecore-jss-nextjs/src/middleware/personalize-middleware.ts) 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. ## Use Incremental Static Regeneration (ISR) and On-Demand Revalidation [Incremental Static Regeneration (ISR)](https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration) and [on-demand revalidation](https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#on-demand-validation-with-resrevalidate) 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](https://doc.sitecore.com/xmc/en/developers/xm-cloud/admin-api.html) to trigger revalidation after content has been published and propagated to [Sitecore Experience Edge](https://doc.sitecore.com/xmc/en/developers/xm-cloud/experience-edge.html). ## Optimize Images with next/image Image optimization is critical for improving Core Web Vitals scores. [next/image](https://nextjs.org/docs/pages/api-reference/components/image) and [Vercel's image optimization](https://vercel.com/docs/image-optimization) features can significantly reduce bandwidth usage, minimize Cumulative Layout Shift (CLS), and improve user experience, particularly on mobile devices. [Sitecore JSS supports](https://doc.sitecore.com/xmc/en/developers/jss/latest/jss-xmc/the-jss-nextimage-component.html) `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. ## Optimize Fonts with next/font [Font optimization](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) can significantly impact page load times and visual consistency. Using [next/font](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts) 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](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#local-fonts) 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. ## Optimize Navigation with next/link [next/link](https://nextjs.org/docs/pages/api-reference/components/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. ## Use Performance and Usage Observability Implementing observability is essential for identifying bottlenecks and tracking improvements in Next.js and Sitecore JSS applications. Vercel [Speed Insights](https://vercel.com/docs/speed-insights) and [Observability Plus](https://vercel.com/docs/observability#observability-plus) are two built-in tools for measuring and diagnosing performance and usage. - [Enable Vercel Speed Insights](https://vercel.com/docs/speed-insights/quickstart#quickstart) in your Vercel project settings to begin collecting Core Web Vitals data correlated with your team’s code changes. - [Enable Vercel Observability Plus](https://vercel.com/docs/observability#enabling-observability-plus) to monitor and analyze the performance, traffic, and usage of your Vercel projects. ## Wrapping up 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.