Next.js is a React-based framework that provides functionality to enable server-side rendering and static site generation using React.
On the server, Vercel is used for page editing and verification, but this functionality is missing in the local container environment. This time, we'll add a Node.js container to replicate the Vercel functionality locally.
In the last issue we were able to deploy a new site in Vercel. We will proceed to use this instance to be able to edit pages in the Experience Editor.
We would like to deploy the web site we have created so far to Vercel. We will show you how to deploy the sample data to the server that was set up at the beginning of this series, and how to deploy it to Vercel.
In the previous session, we prepared a Next.js template. Last time, we introduced the steps to import items into Sitecore to use this template. Now, we'll modify the Next.js settings to reference Sitecore items and display the pages.
The environment we've set up in four parts lacks a Next.js project. We'll add a sample site by integrating the code into the project. This process will be introduced in two steps. In this session, we'll get the Next.js sample running.
In the previous article, we only prepared the environment and did not start the container. This time, we will check how the container will be started by referring to the script up.ps1 to run the sample.
The demo Sitecore Helix provided by Sitecore includes a sample based on Next.js. In this article, we will show you how to run this sample. The actual container launching will be introduced in the next article.
Various hints for developing Sitecore with headless CMS using Next.js SDK are introduced as individual topics. Please refer to the list here.
Up until now, items created as Next.js-based samples have been created based on the root item created when importing JSS samples. This time, we will introduce the procedure for creating the equivalent of a root item.
As the last in the series of component creation, we will create a file component that allows you to specify a file. The file itself will be a file in the media library, but the main purpose of this component is to see how it can be obtained as data.
This time, we'll create a component using a content list. A content list is useful for specifying multiple Sitecore items and utilizing their data collectively. Common use cases include selecting keywords for Meta tags, among other needs.
The data formats we have introduced so far were items that are often used as general data, but this is a modest topic that introduces check boxes.