Information on Headless SXA based on Next.js available in Sitecore
Since sxastarter, the XM Cloud sample, is designed to create a site in one language, a few adjustments are required to run a site in multiple languages. We will introduce this part in two parts in this issue.
When using Tailwind CSS, styles not listed in Next.js will not be covered at build time, so it is necessary to add some definitions to tailwind.config.js so that they can be used as CMS variables.
Since the samples provided in the Starter Kit are created using Bootstrap 5, we will rewrite the Next.js samples to use Tailwind CSS.
Items created in Sitecore XM Cloud can be serialized as YAML files using the Sitecore CLI tools. This time, we will use this mechanism to manage site information on GitHub.
In this article, we will create a sample site on XM Cloud. We will also cover which style sheets to use for the site at the end.
I have been wondering how best to handle .env files when introducing Tips on the blog, but I will reflect this since it was introduced in XM Cloud Tutorials #4.
Previously, we used XM Cloud's project template to create a repository on GitHub, create a branch, and add a new Next.js project. This time, we will deploy this to XM Cloud.
I would like to create a sample using the tips I have been introducing in my blog. This time, we will create the base of a sample that can use Tailwind CSS.
Applying the behavior of the previous LinkList, I would like to create a breadcrumb list component this time.
In this article, we will check how the LinkList component, a component of Headless SXA, is defined.
In the last issue, we ran the new Next.js project, and you can actually see the differences from 21.4.0 to 21.5.0. Since we are here, let's take a look.
I have been using the Haedless SXA project included in the project, but is there any difference between this and the Next.js that has been offered before? This time, we will proceed to prepare and run the new Next.js application.