Information on Headless SXA based on Next.js available in Sitecore
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.
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.
ChatGPT, which is breaking out this year as a generative AI, presents us with JavaScript and TypeScript samples. In this article, we would like to use the code generated by ChatGPT to create a component for XM Cloud.
Creating a Sitecore component allows you to easily create a drag-and-drop component. In this article, we will introduce a wizard to help you create this component. The previously introduced steps are as follows
We will apply Japanese resources to the container and XM Cloud environment. This procedure was previously introduced in our blog, and this time, we are going to include it again in the steps.
Now that we have a header and footer, we would like to make this a default page that must be included. The function to achieve this will be Page Design, which we will introduce in this issue.
Now that the header has been created, we would like to create the footer area. Since we want the footer to display the main menu items, we will learn how to control the menu as well as how to create the footer.
I'd like to use a style sheet to give the header a bit more of a look and feel. In this article, we will show you how to use the layout's display components when designing the screen, and how you can adjust them by changing the style sheet.
We have placed three containers and completed the top two, but have not yet implemented the third container. This is prepared for responsive design, where the menu changes according to the size of the screen. Now let's implement the third and final item.
In the last issue, we placed three containers in the header area and changed the background color with respect to two of them. This time, we would like to place the menue items in the container placed at the top.
Showing 1 to 12 of 22 results