Krushna Patel

Guiding and Supporting Sitecore Users

I actively connect with Sitecore professionals on platforms like LinkedIn and Slack, helping them with their queries and guiding them through challenges related to Sitecore development and content management. I assist others in solving problems, share best practices, and provide advice on Sitecore features, contributing to a stronger, more knowledgeable community.

Started own youtube Sitecore Content SDK series

I’ve started my own YouTube channel to share knowledge and insights about Sitecore development one video per month, with a focus on the new Content SDK and XM Cloud. In the first episode of my series, I compare Sitecore Content SDK with the traditional Headless JSS approach, explaining what’s included in the SDKs, how developer workflows differ, and what to expect in practical implementations. This series is aimed at Sitecore developers and front-end engineers who want to learn modern, cloud-nat...

Making Conditionally Rendered Elements Editable in Page Builder (XM Cloud)

This blog addresses a common challenge in Sitecore XM Cloud Page Builder when working with components that use conditional or dynamic rendering, such as Tabs or Accordions. By default, only the content initially rendered in the DOM is editable, leaving other tabs or panels read-only for content authors. The post demonstrates a practical solution using a check for Experience Editor (isEE) to render all tabs or panels in the DOM while controlling visibility via CSS and JavaScript. This ensures tha...

Migrating from JSS to Sitecore Content SDK

This blog guides developers on migrating Next.js applications from Sitecore JSS 22.8 to the new Sitecore Content SDK for XM Cloud. It covers the key changes, such as replacing the Experience Editor with XM Cloud Page Builder, unified data fetching through SitecoreClient, simplified configuration files (sitecore.config.ts and sitecore.cli.config.ts), and cleanup of unused scripts. The post walks through the migration step by step, including dependency updates, environment variable changes, and co...

Handling Advanced 404s, Redirects and Errors in a Sitecore JSS + Next.js App (Part 2)

This guide covers advanced handling of 404 pages, redirects, and errors in a headless Sitecore JSS app using Next.js. Instead of relying on static pages, it shows how to serve custom 404 pages from Sitecore, giving content authors full control over messaging and design. Redirects can be managed dynamically from Sitecore, allowing editors to update rules without developer intervention, and different 404 pages can be displayed for multiple languages or brands. The guide also addresses error handli...

Accepted Product Review – Sitecore DXP on G2

I shared an in-depth review of Sitecore DXP on G2 based on my direct experience using the platform. The review was approved and published, adding authentic, practitioner-level insights that help other organizations better understand Sitecore’s capabilities and strengths.

Content SDK: A Cleaner Way to Build with Sitecore XM Cloud

In this blog, I break down the new Sitecore Content SDK for XM Cloud and explain how it simplifies front-end development compared to the older JSS SDK. I cover why the SDK matters, its key capabilities—GraphQL integration, multi-site support, personalization, analytics, and a ready-to-use Next.js starter—and show how developers can quickly scaffold and configure a project using the CLI. The blog helps teams understand when and why to use the Content SDK, how it improves both developer workflow a...

Building a Q&A Chatbot with Sitecore Search and Next.js

This blog explains how to build an interactive Q&A chatbot using Sitecore Search and Next.js. It walks through configuring Q&A content in the Sitecore Search CEC portal, connecting the frontend using the useQuestions hook, and displaying exact answers or related suggestions based on user input. The post also covers how to handle responses, show suggestions, manage chat messages, and add animations for a modern UI. It demonstrates how Sitecore Search can power intelligent, real-time chatbot exper...

Answer: onFacetClick and onPageNumberChange are undefined when using useSearchResults in separate component

My answer was accepted by the question owner on Stack Exchange for an issue where onFacetClick and onPageNumberChange were undefined when using useSearchResults in separate components in a Sitecore XM Cloud project. The problem happened because multiple components were using the same RFK ID, causing conflicts between events. I explained that assigning a unique RFK ID to each component ensures that search interactions and pagination work independently, allowing multiple search components on the s...

Feature Request for Option to Hide Form and Show Success Message on Form Submission in XM Cloud form

I submitted a support ticket to Sitecore regarding the behavior of XM Cloud Forms after submission. Currently, the platform allows showing a success message, redirecting to a URL, or doing nothing, but it does not provide an option to hide the form while displaying the success message. I requested a way to automatically hide the form and replace it with a success message after submission. Sitecore accepted this as a valid enhancement and recognized it as an upcoming feature. This highlights my p...

Answer: Render script from multiline field in head tag in Sitecore Headless

I contributed a solution on Stack Exchange for rendering dynamic scripts in the head section of a Sitecore Headless project using Next.js, which was accepted by the question owner. The challenge was that scripts stored in multiline fields were not executing correctly. My approach provided a reliable way to render both inline and external scripts, ensuring they run properly on the page. This helps developers manage dynamic scripts efficiently in Sitecore XM Cloud projects and improves the overall...

Understanding Sitecore Context in Headless Sitecore Part 1

This blog explains how Sitecore context works when moving from traditional Sitecore MVC to a headless architecture such as Sitecore JSS or XM Cloud. It introduces the concept of Sitecore context, what information it provides, and how this changes when rendering moves to frameworks like Next.js or React. The post clarifies how context data is delivered through the Layout Service or GraphQL instead of the server side Sitecore Context object. It also highlights how developers can use this context o...

How Sitemaps Work in Sitecore XM cloud and Next.js: Simplifying SEO for Headless Sites

This blog explains how sitemaps function in a headless setup using Sitecore XM Cloud and Next.js, and why they are essential for effective SEO. It covers the role of XML sitemaps in helping search engines discover and index pages, especially on large or complex sites. The post describes how Sitecore manages sitemap data and how Next.js serves that data through an API route, creating a dynamic and always up-to-date sitemap structure. This practical breakdown helps developers understand how to int...

How to Use Dynamic Placeholders in Sitecore: A Simple Guide

This blog explains how to implement dynamic placeholders in Sitecore to build flexible and reusable components. Using a real scenario, adding a share button inside an article banner, I walk through the setup of dynamic placeholder keys, the React code required to render them with Sitecore JSS, and best practices for managing multiple placeholder instances. This guide helps developers understand how to build scalable, dynamic layouts in Sitecore without hardcoded structures.

Preventing Unnecessary API Calls in Sitecore Search Using Next.js (Sitecore JSS)

This blog explains how to optimize Sitecore Search performance using Next.js (Sitecore JSS) by preventing unnecessary API calls. It outlines a method to disable the search API from running automatically when the page loads and only triggers it when the user submits a search. The blog covers step-by-step code implementations for disabling and enabling the API call, improving website performance, reducing server load, and enhancing the user experience. The result is faster page loading and more ef...

Understanding Dynamic Pages in Sitecore XM Cloud with Next.js

This blog explains how to leverage Next.js's dynamic routing feature, [[...path]].tsx, in combination with Sitecore XM Cloud to build scalable, dynamic websites. It compares two key rendering approaches—Static Site Generation (SSG) and Server-Side Rendering (SSR)—highlighting their benefits and use cases. By using [[...path]].tsx, developers can handle multiple routes without creating individual pages, while seamlessly integrating Sitecore's CMS for real-time or static content delivery. The blog...

Securing Sensitive API Tokens with Next.js Proxies and Vercel Edge: A Dynamic Approach

This blog details a solution to securely manage sensitive tokens and data in a Next.js project that interacts with multiple APIs, such as middleware services. Initially, the project exposed sensitive tokens by making direct API calls from the frontend, which posed a security risk. To resolve this, the author introduced Next.js API routes as a proxy layer, ensuring that tokens were added server-side and never exposed in client-side code. The solution also used dynamic API routing to streamline re...

How to Set Up a Sitecore JSS Application with Next.js using the JSS Initializer

This blog provides a step-by-step guide to setting up a Sitecore JSS app using Next.js: Setup: Run npx create-sitecore-jss nextjs to initialize the app, then answer prompts about your app name, Sitecore hostname, and data-fetching preferences (GraphQL or REST). Configure: Update the .env file with your Sitecore API key and hostname. Run: Use npm run start:connected to start the app in connected mode to fetch real-time content from Sitecore. Fix Error: If you encounter the "Cannot read proper...

Headless Basics Uncovered Frontend Integration Sitecore with React and Next.js

This webinar by Sitecore User Group Mentor and Mentees. In the "Headless Basics Uncovered" session, I covered how to set up a Sitecore JSS project with Next.js and XM cloud using the CLI. I walked through the steps to create and configure the project, as well as the repository structure of a JSS project, explaining where different parts of the application connected and disconnected more. I also went into how everything works together, including how React components integrate with Sitecore throug...

Question: How to do distance based sorting in Sitecore Search

I answered a question on Sitecore Stack Exchange about performing distance-based sorting in Sitecore Search using geo-location filters. I explained two types of geo-filters: FilterGeo and FilterGeoWithin. FilterGeo is ideal for searching around a single location, using latitude and longitude to define a specific point. This filter allows sorting based on proximity to that point, like finding items near a store or landmark. I provided an example using FilterGeo to set a 7 km radius around a singl...

Third-Party scripts and iframes not Loading on Page Navigation with Sitecore JSS Link in Next.js

I recently asked a question on Sitecore Stack Exchange regarding an issue I'm facing while using Next.js with Sitecore JSS in a headless project. The problem occurs when I navigate between pages using Sitecore's link component to maintain the single-page app (SPA) behavior. When I use this method, third-party scripts and iframes don't load properly on the new page. However, if I use a regular anchor tag instead, everything works as expected, but I lose the SPA functionality. The scripts and ifra...

Understanding and Resolving Next.js Router Slowness in Sitecore JSS

This blog discusses a performance issue encountered while working with Next.js and Sitecore JSS, where page transitions were slow, taking up to 51 seconds. The author investigates several potential causes, including server-side performance issues, large payloads, network latency, and caching problems. After identifying that the slowdowns were mainly occurring in development mode due to the lack of pre-built routes, the solution involved switching to production mode, enabling Static Site Generati...

Implementing CSP Headers in a Next.js Application with Sitecore CMS: A Comparative Analysis

This blog compares two methods of implementing Content Security Policy (CSP) headers in a Next.js app connected to Sitecore CMS:

Solution 1: Fetch CSP headers dynamically from Sitecore CMS via API calls in the client.

Pros: Easy to update headers in Sitecore. Cons: Security risks and performance issues due to runtime API calls on every page visit. Solution 2: Fetch CSP headers during the build process, embedding them in the app.

Pros: Faster performance (no runtime API calls) and bett...

Next.js Hydration Errors: Understanding and Overcoming Common Issues

This blog explains hydration errors in Next.js, which occur when the server-rendered HTML doesn't match the client-rendered version during the hydration process. These errors are common in SSR applications like Next.js, where content rendered on the server can differ from what React expects on the client. Key causes include mismatched data (e.g., localStorage usage), conditional rendering based on client-side state (e.g., window size), random values (e.g., random numbers), and browser-specific A...

How to Highlight Search Results in Sitecore Search and Next.js

In this blog, I show how to set up a keyword highlight feature in Sitecore Search using Next.js. The goal is to highlight search keywords, like "India’s" in Olympic 2024 articles, in a different color. First, I created a widget in Sitecore Search and added 50 Olympic-related articles. Then, I used the Sitecore API Explorer to configure the highlight settings, wrapping the keyword in custom HTML tags. After confirming the keyword was highlighted in the API response, I added the highlight feature ...

Frontend Hacks: Dynamic Data Display In Sitecore Experience Editor using Next.js and React.js

In this blog, I share several practical hacks for working with Next.js, React.js, and Sitecore JSS to ensure content remains editable through Sitecore's Experience Editor. The solutions cover:

Token Replacement in RichText: A custom component that replaces tokens in RichText fields, while keeping the content editable in the Experience Editor. Consistent CSS for RichText: A universal CSS class that applies consistent styling to RichText elements across the site. Fixing Hydration Errors: A so...

Integrating Progressive Web Apps (PWA) into Your Next.js and Sitecore Applications: A Simple Guide

This blog explains how to integrate Progressive Web App (PWA) features into a Next.js application, with a special focus on working with the Sitecore Starter Kit. PWAs offer benefits like offline functionality, push notifications, fast loading, and the ability to install the app on a user’s home screen. The guide covers setting up Next.js with next-pwa, creating a manifest file, adding service workers, and testing the app.

For Sitecore, additional steps are needed to handle dynamic content, ca...

My Experience at SUGCON India 2024

This blog shares my experience attending and speaking at SUGCON India 2024, an exciting conference for Sitecore users. I talk about the key highlights, including Sitecore’s new AI integrations, and what I learned from several insightful sessions. These covered topics like Sitecore XM Cloud, personalization, customer data platforms, and marketing automation. I also discuss my presentation on the AI-powered SEO & Accessibility Assistant for Sitecore CMS, which helps content editors easily optimize...

Geo Location Filters in Sitecore: Finding Results Near You

This blog explains how to use geo-location filters in Sitecore Search, focusing on two types: geoFilter and geoWithin. The geoFilter is used for pinpointing search results based on a single geographic location (latitude and longitude), while geoWithin is used to filter results within a defined polygonal area. The blog provides code examples for implementing both filters in Sitecore, helping you personalize search results based on the user's location or a specific region. It also discusses when t...

Mentee in Sitecore Mentorship Program

I am currently a mentee in the Sitecore Mentorship Program, where I have the privilege of learning from my mentor, Varalaxmi MD. I joined this program with a strong interest in becoming a Sitecore MVP in 2025, as I’m passionate about expanding my knowledge and contributing more to the Sitecore community. Through this mentorship, I have gained valuable insights into Sitecore’s evolving ecosystem, which has further fueled my desire to share my experiences and expertise with others.

Sitecore Frontend Development: Simplified Best Practices

This blog is a guide for frontend developers working with Sitecore, highlighting best practices to create efficient, maintainable, and scalable web applications. It covers real-world scenarios and practical examples, including using modular components, optimizing performance, ensuring responsive design, improving SEO and accessibility, handling complex data structures, preventing hydration errors, and organizing code with Sitecore Helix principles. By following these strategies, developers can b...