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.
Adding a Next.js project
The method of creating a new project instead of the previously provided jss command has changed since 20.x. In this article, we will use this new command to create a Next.js project.
First, since we want to implement code management under src, move to the src folder and execute the following commands.
PowerShell
npm init sitecore-jss
You will be asked which framework to use, so select nextjs to proceed.
It will then ask you for the name of the folder. This time, change it to C:\projects\Sitecoredemo.Docker\src\rendering and execute. The name of the application will then be displayed.
This time we will use sitecoredemo-jp, which will display the hostname of Sitecore. This time, the name to run locally is cm.sitecoredemo.localhost.いるため、この値を設定します。
You will be asked to confirm whether you want to use GraphQL or REST, so select GraphQL. Next, you will be asked whether you want to use SSG (static site generator) or SSR (server-side rendering). In this case, select SSG.
You will be asked if you need the template data. Since sample data is not required this time, only the template is needed, so proceed without checking the box.
This completes the command verification, creates the data in the specified directory, and `npm install` is executed. After a few moments, the template is ready.
Additional settings
In order to make Next.js projects easier to read, we use a mechanism called Prettier. There will be cases where errors occur due to differences in line feed codes, etc. To avoid this, add the following file.
Plain Text
# Auto detect text files and perform LF normalization
* text=autoThis will avoid errors that may occur in the future when adding new components or using different line feed codes when some code is used separately.
Summary
In this article, we have introduced the Next.js template up to the point where it is added to the project. In this state, there is still no content in Sitecore and Next.js does not work because there is no sample data in Next.js. Adding this part of the project will be the point of the next article.