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.
Reflect the configuration file
The following files are generated when the template is created (the name of the .config file changes depending on the project name.
- src\rendering\sitecore\config\sitecoredemo-jp.config
After reflecting the file, the following command is used to reflect the file in the container.
PowerShell
docker compose build cmThe configuration file is now reflected for the CM server.
Next.js local project testing
Set the SITECORE_API_KEY and SITECORE_API_HOST items in the src\rendering\.env file. The former is the API key you have already created, and the latter is the host name. After setting these two items, start locally with the following command.
PowerShell
jss start:connectedAfter a few moments, the page will appear as shown below.
Summary
In fact, we divided the process of setting up the sample site into three parts: adding the Next.js sample to the project, deploying the actual items to be used by Sitecore, and then connecting the site. The actual process takes less than an hour, but I have divided it into three parts to show you step-by-step. In the next article, we will deploy and display the items not locally but in Vercel.