Posts

Showing posts with the label Next JS

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 Sitecore GraphQL data in Next JS

Image
Hello everyone, in this blog we will try to learn how we can fetch the data from Sitecore using GraphQL and build the component in Next JS application. We will utilize the Tiles component which was build in my last blog regarding GraphQL. The blog link is available Here This is just an example as same component can be developed using Layout service also. Lets see the code for the front end and try to see learn what each code function do. import React from "react"; import { GetStaticComponentProps, useComponentProps, JSS_MODE_DISCONNECTED, GraphQLRequestClient, } from '@sitecore-jss/sitecore-jss-nextjs'; import { StyleguideComponentProps } from 'lib/component-props'; import config from 'temp/config'; type ListItem = { Image : { src : string; alt : string; } TileLink : { target : string; text : string; url : string; } Title : { value : string; } id : string; } const Tiles = (props:...