Posts

Showing posts with the label Sitecore JSS

Customizing Sitecore Next JS Static Path Build Time By Extending Multisite Plugin

Image
In this blog, we’ll explore how to customize the build-time behavior during Static Site Generation (SSG) in an XM Cloud–based application. As you may know, most of our pages are statically generated during the frontend build process and are then served from Vercel's servers or CDN. This significantly boosts page load speed and improves overall site performance. But the key question is — how can we customize this process? Often, we have pages in the CMS that are quite old — for example, blog posts that were published 10 years ago. The goal is to exclude such outdated pages from the SSG process by omitting their routes during build time. As a result, these pages won’t be pre-rendered; instead, they will be generated on-demand when a user requests them, allowing the server to handle the rendering dynamically.We will divide this blog into 2 part. Part 1: First part will be how to get the pages that we want to exlude and store it some where. Part 2: Pass these list of pages to grap...

Reading AppRoute Data In Sitecore NEXT JS

Image
Hello everyone, in this blog we will see, how we can read route data from layout service. So let's start. By Default, we have default field in Sitecore for all default page template.That is PageTitle. We can add our own custom fields also.This fields are exposed using Layout Service.Let's see how we can read it. Sitecore structure Layout Service Front End Code to Read Route Data import {Field,useSitecoreContext,Text } from '@sitecore-jss/sitecore-jss-nextjs'; type CustomRouteTypeContext = { route: { fields: { pageTitle: Field<string>; }; }; }; const ReadApprouteData = () => { const {sitecoreContext: {route: { fields },},} = useSitecoreContext<CustomRouteTypeContext>(); console.log(fields); return( <div> <Text field={fields.pageTitle} /> </div>) }; export default ReadApprouteData If you see, we are using the useSitecoreContext hook to retrieve the route da...

Creating First Headless component - Sitecore Next JS

Image
Hello everyone, As my learing continues in Sitecore Headless, In this blog we will see how we can create component in Sitecore Headless Next JS. We will take an example of how we can create a Footer component . Also we will try to use all Sitecore fields that are mostly use in our day to day work and how we can render those fields(Rich Text, Link, Multilist, Image, Dictionary etc.) in Headless development. Let's describe the footer component. It has fields mentioned. Footer Label, FooterLogo with Link, Description and List of external links. Footer Label : Dictionary Item FooterLogo : (Image) with Link :(General Link) Description: (Richtext) List of external links : (Multilist) Lets see the Sitecore Structure: Templates Renderings Datasoure Item Placeholder Settings Home Item Presentation Details once we add the component, we can check the same in Layout Service. Layout Service Now after verifying the component in Layout service, its time to build the read t...