Next.js is a React-based framework that provides functionality to enable server-side rendering and static site generation using React.
As for dates and numbers, they can be managed using text fields, but it is possible to set up dates, times, and numbers as fields in Sitecore. In this article, we will show you how to use the fields so that you can structure your content using these items.
In the previous article, we created a template using a field format related to text. This time we will create a component that allows you to specify an image.
Sitecore provides templates to define the data structure. This time, we'll create templates to define how data is stored and how it's called for display. We'll use sample code from the Styleguide's sample data to illustrate this process.
Once you have an environment ready to work with Sitecore, the steps regarding the addition of components are quite simple. In this article, we will see how the component is managed by adding the component without using the jss scaffold command.
Since the Next.js template already includes a module for multilingual support, it is relatively easy to add more languages by adding settings on the Sitecore side. So this time, we would like to add Japanese resources.
Until now, Sitecore's editing environment utilized two tools: the Content Editor for an overall view and the Experience Editor for WYSIWYG editing. The new tool we're introducing, Sitecore Horizon, combines the best features of both.
In the last issue, we created and placed a new component, but it still looks like a Tailwind CSS design with just normal HTML displayed. This time we want to change the appearance a bit and also change a few attributes of the content.
In the previous article, we organized the header and footer areas. In this article, we will create a new component for the Hero area to be used on the top page. Through this procedure, you will learn how to create a new component.
In the previous article, we implemented Tailwind CSS to the point where it can be used. This time, we will review the steps to separate the navigation code contained in the layout into separate files before using it.
The Next.js sample is configured with bootstrap as the standard CSS style sheet, and although various CSS style sheets are provided, we will switch to using Tailwind CSS.
This time, we will change things up a bit and show you how to apply Google Tag Manager with Next.js instead of Sitecore. We will also include a test.
In the previous article, I deployed a Next.js sample to Sitecore and integrated Vercel for delivery. This time, to facilitate easier testing and verification, we'll introduce the steps to separate production and staging environments and test locally.