MVP 2025
Technology
I'm a Mentor
I have been through this journey myself and know what it takes. I am here to support and guide you through every step—whether it's contributing to the community, improving your Sitecore skills, or working towards MVP recognition. I’ll share my experiences, provide feedback, and help you stay motivated. My goal is to make this process easier for you and ensure you grow both technically and professionally. Let’s make this journey together!
Timeline
Started Blog Series - Sitecore JSS Deep Dive with Next.js
A blog series to help more people learn about Sitecore JSS and the growing importance of frontend development in Sitecore’s headless architecture. As Sitecore moves from backend to frontend focus, the role of frontend developers is becoming more important than ever. Through this series, I’ll share practical knowledge and tips to help developers build modern, flexible Sitecore applications.
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...
Sitecore SearchAnswer: How to Prevent API Call in Sitecore Search Until User Submits Search in Next.js (Sitecore JSS)?
To prevent unnecessary API calls in Sitecore Search with Next.js (Sitecore JSS), you can use the query.setEnabled(false) method to disable API requests until needed. This ensures the search API does not trigger on page load or during typing. Once the user submits their search query, you can re-enable the API by setting query.setEnabled(true) and proceed with triggering the search. This approach provides a controlled and efficient search experience.
Sitecore SearchUnderstanding 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...
Sitecore XM CloudA Practical Guide to SSG and SSR in Next.js (with Sitecore JSS)
When building a Sitecore JSS application with Next.js, choosing the right rendering method—Static Site Generation (SSG) or Server-Side Rendering (SSR)—is crucial for optimizing performance and data freshness. SSG in Next.js pre-generates pages at build time, making it perfect for Sitecore-powered static content like blogs, marketing pages, or informational sites, ensuring fast load times. SSR, on the other hand, generates pages on each request, ensuring the content is always up-to-date, making i...
Sitecore XM CloudSecuring 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...
Sitecore XM CloudUnderstanding the .env File for Sitecore JSS with Next.js
The .env file in your Sitecore JSS Next.js project configures essential environment variables for connecting to Sitecore and managing content rendering. Key variables include PUBLIC_URL for setting your app's URL, SITECORE_API_KEY for authentication, and SITECORE_API_HOST for the Sitecore API endpoint. For data fetching, use GRAPH_QL_ENDPOINT (if using GraphQL) and FETCH_WITH for selecting GraphQL or REST. The JSS_EDITING_SECRET secures Sitecore editing, while SITECORE_SITE_NAME is useful for mu...
Sitecore XM CloudHow 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...
Sitecore XM CloudClean code practices in Headless projects
I presented in Sitecore User Group hyderabad.In my webinar on Clean Code Practices in Headless Projects, I talked about how to write code that’s easy to maintain and works well in modern web projects. I explained the differences between SSG (Static Site Generation) and SSR (Server-Side Rendering), and why it's important to write clean code for both. I also went over common issues, like hydration errors, that happen when the client and server don’t sync up correctly, and shared tips on how to avo...
Sitecore XM CloudHeadless 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...
Sitecore XM CloudAnswer: How to filter based on multiple geo co-ordinates with Sitecore Search
I answered a question on Sitecore Stack Exchange about how to perform multiple geo-filtering using Sitecore's FilterGeo feature. In my response, I suggested using FilterGeoWithin, which is designed for searching within a radius around multiple geographic points. I provided an example where a set of coordinates (latitude and longitude pairs) is used to define several locations, and the FilterGeoWithin is applied to search within a specific radius, such as 7 km. I also clarified the difference bet...
Sitecore SearchQuestion: 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...
Sitecore SearchThe “Cannot update a component while rendering a different component” Error in React
This blog explains the common React error, "Cannot update a component while rendering a different component," and provides solutions to fix it. The error occurs when a state update is attempted while React is in the middle of rendering a component, causing potential issues with the render process. Common causes include state updates during child component rendering, side effects in render logic, and misuse of the useEffect hook. The blog offers solutions like moving state updates to event handle...
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...
Sitecore XM CloudAnswer : Fetch grapghQl response in next js
I provided an answer on Sitecore Stack Exchange regarding how to add content security headers in Next.js that are configurable from the CMS side. I shared two possible solutions with their pros and cons. The first solution involves calling a GraphQL API from Sitecore CMS to dynamically fetch and replace static headers, but this can impact performance and security as it requires server-side calls. The second solution, which I recommend, involves calling the GraphQL API during the build process in...
Sitecore XM CloudUnderstanding 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...
Sitecore XM CloudManaging URL Rewrites in Sitemap with Sitecore XM Cloud and Next.js
This blog provides a step-by-step guide on how to resolve issues with outdated sitemap URLs in a Next.js application integrated with Sitecore XM Cloud. It explains how to handle changes in URL structure, redirects, and rewrites that can cause broken links and SEO issues. The solution involves fetching the sitemap, converting the XML data to text, updating URLs, and serving the updated sitemap to both users and search engines. By following the guide, developers can ensure their sitemap is current...
Sitecore XM CloudImplementing 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...
Sitecore XM CloudAnswer : How to add content security headers in Next.js which are configurable from cms side? where to add?
I recently provided an answer on Sitecore Stack Exchange regarding how to add content security headers in Next.js that are configurable from the CMS side. I shared two possible solutions with their pros and cons. The first solution involves calling a GraphQL API from Sitecore CMS to dynamically fetch and replace static headers, but this can impact performance and security as it requires server-side calls. The second solution, which I recommend, involves calling the GraphQL API during the build p...
Sitecore SearchNext.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 ...
Sitecore SearchHow to Highlight Search Results in Sitecore Search and Next.js
I’ve added code to GitHub demonstrating how to implement a keyword highlight feature in Sitecore Search using Next.js. In this project, I show how to highlight search keywords, like "India’s" in Olympic 2024 articles, in a different color. First, I created a widget in Sitecore Search with 50 Olympic-related articles and configured the highlight settings using Sitecore API Explorer. After confirming the keyword was correctly highlighted in the API response, I integrated the feature into my Next.j...
Sitecore SearchFrontend 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...
Sitecore XM CloudUnderstanding the Latest Fix in Sitecore-Search/React: Reducing Bundle Size and Enhancing Analytics
The latest update to the @sitecore-search/react package brings two important improvements. First, it reduces the bundle size by dynamically loading the order-cloud-sdk, instead of including it in the build, which helps speed up page load times. This change is especially beneficial for large projects like e-commerce sites, where performance is critical. To implement this, developers can configure dynamic imports in Vite, Next.js, or Webpack. The second improvement addresses an issue with widget v...
Sitecore SearchIntegrating 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...
Sitecore XM CloudSitecore TECH Talks - Experiences of a few Attendees and Speakers of Sitecore SUGCON India 2024
This video we recorded for Sitecore User Group India. In this video, I shared my experience at SUGCON India 2024. Alongside over 60 of our colleagues who traveled from different Horizontal offices to Bangalore, I was fortunate to participate in the event. This year, the conference had a strong focus on Sitecore, and it was exciting to see many of our teammates, including myself, presenting on stage for the first time.
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...
Unlocking SEO & Accessibility: AI- Powered Assistant for Sitecore CMS
At SUGCON 2024, I and Jatin Prajapati, presented on the challenges content editors face in achieving optimal SEO and accessibility using Sitecore CMS. We introduced an innovative solution: the AI-powered SEO and Accessibility Assistant. This tool simplifies the process of generating relevant keywords and accessibility reports directly within Sitecore CMS, reducing the reliance on external tools and minimizing errors. Our presentation highlighted how this new feature empowers content editors to e...
Sitecore XM CloudGeo 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...
Sitecore SearchThe Evolution of geoFilter in @sitecore-search/react
This blog highlights the changes to the geoFilter feature in the @sitecore-search/react package across three versions:
Version 2.3.0-alpha.0-experimental-54f6cf96 Version 2.4.0-alpha.2 Version 2.4.1-alpha.1 It discusses how the latitude (lat) and longitude (lon) values evolved from optional to mandatory, and then back to optional but encapsulated in a Coordinate object. These changes improve flexibility, structure, and accuracy in handling geo-based searches.
Sitecore Search2024
29/Mar
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 Search: Bringing Powerful Search to Your Sitecore Headless Apps
This blog shows how to easily add powerful search features to Sitecore headless applications using Sitecore Search. It explains how developers can use Sitecore's JS SDK and UI Components to quickly integrate advanced search capabilities into their React apps. Using a bookstore example, the blog walks through the process of installing packages, setting up components, and adding features like filters, recommendations, and real-time search results. It highlights how simple and beneficial Sitecore S...
Sitecore SearchSitecore 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...
Sitecore XM Cloud