Reading time: 6 min read
Powerful Custom Hooks for Optimizing Next.js in Sitecore XM Cloud Environments: Part 1
Learn to enhance Sitecore XM Cloud with custom hooks, improving localization and personalization for a more engaging user experience.
Learn to enhance Sitecore XM Cloud with custom hooks, improving localization and personalization for a more engaging user experience.
Start typing to search...
In the dynamic world of web development, the integration of Next.js with Sitecore XM Cloud is like opening a new chapter. It's not just about technology; it's about how we can make web development smarter and more intuitive.
In this blog, we're diving into the world of custom hooks in React, which are much more than just a technical feature—they're a game-changer in how we handle data and breathe life into our applications. These hooks aren't just about coding; they're about creating harmony between Next.js's smart server-side magic and Sitecore's robust content management, making our digital creations more efficient and user-friendly. Join us as we explore how custom hooks can transform your web applications, making them not just functional but remarkably efficient and effective in a Next.js and Sitecore XM Cloud ecosystem.
useFetchItemFieldsIn our quest to enhance our Next.js applications with Sitecore XM Cloud, let's start with our first powerful custom hook: useFetchItemFields. This hook simplifies fetching data from Sitecore using GraphQL, streamlining the process of displaying Sitecore-managed content in our Next.js front-end.
The useFetchItemFields hook is designed to retrieve specific fields of a Sitecore item. This functionality is particularly useful for developers working with Sitecore as a CMS, enabling them to access and display customized content on their Next.js front-end.
Code breakdown:
export const useFetchItemFields = (sitecorePath: string) => {
const [itemFields, setItemFields] = useState(null);
const { sitecoreContext } = useSitecoreContext();
useEffect(() => {
const fetchData = async () => {
try {
const url =`${process.env.PUBLIC_URL}/api/graphQL/GetItemFields`;
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
sitecorePath: sitecorePath,
sitecoreLanguage: sitecoreContext?.language ?? 'en',
}),
});
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const result = await response.json();
const resultProps: itemProps = JSON.parse(result);
setItemFields(resultProps);
} catch (err) {
console.error('Error with PageScriptBox:', err);
}
};
fetchData();
}, [sitecorePath, sitecoreContext?.language]);
return itemFields;
};
How It Works
useState for managing the fetched data state (itemFields) and useEffect for handling the data fetching operation. This setup ensures efficient state management and response to component lifecycle events.useSitecoreContext, the hook gains access to the current Sitecore context. This is particularly crucial for fetching language-specific content, ensuring users receive content in the correct language.useEffect, a fetchData function is defined to conduct the API call. This function is the heart of the hook, where it communicates with the backend, requesting the appropriate content based on the sitecorePath and the language setting from Sitecore’s context.API Side for Data Fetching
The backend part of this setup involves an API handler that responds to the hook's requests:
export default async function handler(req, res) {
try {
const { sitecorePath, sitecoreLanguage } = req.body;
const categoryDetailDb = await GetItemFields(sitecorePath, sitecoreLanguage);
return res.status(200).json(JSON.stringify(categoryDetailDb));
} catch (error) {
console.error('Error getting Side Nav Data:', error);
return res.status(500).json(JSON.stringify(error));
}
}
const GetItemFields = async (sitecorePath: string, sitecoreLanguage: string): Promise<any> => {
const graphQLClient = new GraphQLClient(config.graphQLEndpoint);
graphQLClient.setHeader('sc_apikey', config.sitecoreApiKey);
const pageComponentsQuery = gql`
query {
item(
path: "${sitecorePath}"
language: "${sitecoreLanguage}"
) {
id
name
fields{
id
name
value
}
}
}
`;
const data = await graphQLClient.request(pageComponentsQuery);
return data;
};
useFetchItemFields in Next.jsIncorporating the useFetchItemFields hook into your Next.js components is straightforward, enabling seamless Sitecore content retrieval:
Example Integration
const MyComponent = () => {
const itemFields = useFetchItemFields('{AAAAAAA-AAAA-AAAA-AAAA-AAAAAAAAAAAA}');
// Render logic using the fetched itemFields
...
};
This custom hook, along with the API handler, forms a cohesive unit that simplifies fetching and displaying data from Sitecore in a Next.js application. It abstracts the complexities of GraphQL queries and state management, allowing developers to focus more on building the user interface.
useTranslations for LocalizationContinuing our journey to enhance Next.js applications with Sitecore/XM Cloud, let's explore our second custom hook: useTranslations. This hook is pivotal for maintaining an organized and efficient approach to handling translations and localization within your application.
useTranslationsCentralized Translation Management
useTranslations hook leverages useI18n from 'next-localization' to handle translations.How It Works
import { useI18n } from 'next-localization';
export function useTranslations() {
const i18n = useI18n();
return {
creditLabel: i18n?.t('CreditLabel'),
creditsLabel: i18n?.t('CreditsLabel'),
submitSearchLabel: i18n?.t('SubmitSearchLabel'),
readMoreLabel: i18n?.t('ReadMoreLabel')
};
}
How It Works
useI18n to access the internationalization functionalities of the Next.js application.useTranslations in Next.jsFirst, call useTranslations at the beginning of your component to access the translations object.
const translations = useTranslations();
Then Use the properties of the translations object to display localized text in your component. For instance, if you want to display a breadcrumb home label, you would use translations.readMoreLabel.
<Text>
{translations.readMoreLabel}
</Text>
useTranslationsuseTranslations significantly enhances the maintainability of your codebase.This hook is a testament to the power of custom hooks in enhancing not just the functionality but also the organization and maintainability of Next.js applications, especially in multilingual settings.
In today’s exploration, we’ve unlocked the magic of useFetchItemFields and useTranslations hooks, transforming our Next.js applications in the Sitecore XM Cloud environment. These aren’t just mere tools; they're the essence that makes our apps vibrant, intelligent, and in tune with diverse user needs. It's like giving voice and understanding to our digital creations, all through the simplicity and brilliance of these hooks. And what's exciting is that this is just the start. Keep an eye out for our future posts, where we'll introduce more innovative hooks, each adding a new dimension to our web development adventures. Stay tuned for more!
For further information and a deeper understanding of the concepts discussed in this blog, the following resources have been referenced: