There are a few approaches you can use when creating components with Next.js in a Sitecore headless solution, they are well explained in this blog post. Sitecore first is the mostly commonly used approach, in this blog post I am going to walk you through high-level diagram and steps for creating components using this approach. … Continue reading Sitecore First Development Approach for Sitecore Headless component development with Nextjs
Next.js
Your Sitecore Next.js Source Code May Be Exposed
Since Next.js is becoming the most popular choice with Sitecore projects which is a great and very powerful combination, I want to share an important security point that you maybe missing or have not noticed yet. When working with Next.js in Sitecore XM Cloud or Sitecore Headless JSS projects, one common issue is that the … Continue reading Your Sitecore Next.js Source Code May Be Exposed
Troubleshooting “Unknown or Incomplete Layout Service Configuration” in Sitecore JSS
Recently, I had to switch my Next.js application from GraphQL to REST. Sitecore have a simple and straight forward article to do just that and apparently it is simply changing one environment variable but it turned out to be a nightmare to get it to work. I wanted to document my experience so it can … Continue reading Troubleshooting “Unknown or Incomplete Layout Service Configuration” in Sitecore JSS
Sitecore Personalize Part 3: Integrate Sitecore Personalize using Sitecore Engage SDK with Next.js
Continuing our exploration of Sitecore Personalize integrations, today let's dive into a key implementation for modern websites i.e. integration of Sitecore Personalize with a Next.js website using the Sitecore Engage SDK. As I shared in my previous blog posts, there are multiple ways to integrate Sitecore Personalize into your applications. However, when working with Next.js … Continue reading Sitecore Personalize Part 3: Integrate Sitecore Personalize using Sitecore Engage SDK with Next.js
Sitecore on Vercel: Tips for Optimizing Your Application Usage and Keeping Costs Down
Deploying your Sitecore application on Vercel might come as a surprise if you're accustomed to hosting on platforms like Azure or on-prem servers. While Vercel offers an impressive infrastructure, it works quite differently from traditional hosting solutions. Therefore, it's essential to understand how Vercel charges for its services and how to optimize your application to … Continue reading Sitecore on Vercel: Tips for Optimizing Your Application Usage and Keeping Costs Down
How Sitecore’s Default Next.js Dictionary Implementation Can Hurt Performance and Bandwidth Usage
In Sitecore, the dictionary is often used to provide translations for labels, buttons, messages, etc. In simple terms, the dictionary is a way to store text in different languages and easily retrieve it. If you are using Sitecore Headless with Next.js and analyze the page's payload you will see that it outputs the whole dictionary … Continue reading How Sitecore’s Default Next.js Dictionary Implementation Can Hurt Performance and Bandwidth Usage
Leveraging Vanity URLs with Sitecore and Next.js to Ensure Customers Always Access the Latest Product Versions
In today’s fast-paced agile world, product updates and new releases happen frequently often every few weeks or months. For marketing teams, this presents a challenge: ensuring that all promotional materials, including emails, websites, and other digital assets, are consistently updated to reflect the latest product version. One effective solution is the use of a vanity … Continue reading Leveraging Vanity URLs with Sitecore and Next.js to Ensure Customers Always Access the Latest Product Versions
Sitecore Nextjs Error serializing .componentProps[“b53f473e-4cf1-4570-b6e5-aa46c9872634”].fields.title returned from getStaticProps
We have a Nextjs based Sitecore headless solution with Sitecore Experience Edge deployed to Vercel. We are prerendering most used pages during build to make sure they are always available even after a deploy so that even the first user who hits the page does not have to wait a few seconds to see it. … Continue reading Sitecore Nextjs Error serializing .componentProps[“b53f473e-4cf1-4570-b6e5-aa46c9872634”].fields.title returned from getStaticProps
Cache Revalidation in Sitecore Website Built Using Next.js Incremental Static Site Generation
In the ever-evolving world of web development, delivering highly performant and dynamic websites is crucial. When building a Sitecore website with Next.js, utilizing Incremental Static Site Generation (ISSG) and hosting it on Vercel, one of the key aspects to ensure optimal performance and up-to-date content delivery is on-demand cache revalidation. This blog will dive into … Continue reading Cache Revalidation in Sitecore Website Built Using Next.js Incremental Static Site Generation
Next.js API Route for On-Demand Cache Revalidation using pages or app folder
If you're looking for an API endpoint implementation that can take a dynamic path from a query string to revalidate page cache and force page regeneration, you've come to the right place. The biggest challenge with using statically generated sites is the difficulty of pushing content updates quickly in urgent situations. You can't set the … Continue reading Next.js API Route for On-Demand Cache Revalidation using pages or app folder