Learning Sitecore - Tips and Tricks

A Sitemap is an important part of SEO for any public-facing website. This is a list of URLs you want to crawl by the google bots for indexing. NextJS makes it easy for us to achieve this. So let’s see how to add a sitemap to your NextJS project. What is an XML Sitemap? An XML sitemap or simply sitemap.xml is a file that lists all the important URLs or pages so that search engines can easily crawl them. When we go for /sitemap.xml path in any websites which implemented the Sitemap, we could see an XML file as the result included with all the links in that website.  How to Add an XML Sitemap in a Next.js App? Assumption - You have set up your project using the Sitecore Containers template for Next.js. If not please refer this link . Install the Next-Sitemap package We are going to use a package next-sitemap for generating the sitemap in our Next.js app. The following command will install the package inside our Next.js app. npm i next-sitemap Add the next-sitemap config file In the r

Creating new components is one of the most common tasks while developing JSS applications. Once JSON rendering is defined and exposed to Layout service we need to create the respective component in the front end application which might be developed using React or Next.js. Let's create a Hero Banner component which is very common component for many websites.  Assumption - Y ou have set up your project using the Sitecore Containers template for Next.js. If not please refer this link . Hero Banner component mostly contains the following fields: Background image Heading / Title Sub-Heading/ Sub-Title  CTA Link Let's proceed with the above requirement -  Create the JSON rendering in Sitecore To create the JSON rendering in Sitecore we need to do the following: Create a new template called HeroBanner in  the /sitecore/templates/Project/YOUR_PROJECT folder . In this template, create a new template section and add the following fields: Background Image - Image field Heading  - Single L