Reading AppRoute Data In Sitecore NEXT JS

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 data. Basic definition for useSitecoreContext : useSitecoreContext is a custom hook provided by the JSS framework that allows you to access and interact with the Sitecore context data in your application. It's commonly used to retrieve information such as the current language, route data, and other context-specific information from Sitecore

Some Example of Route Data properties

       
const sitecoreContext = useSitecoreContext();
// Access context properties
const language = sitecoreContext.language;
const routeData = sitecoreContext.route;
const pageEditing = sitecoreContext.pageEditing;
	   
 

Thanks for reading. Let the learning continue. Happy Sitecoring!!

You can check my other blogs too if interested. Blog Website