Sitecore Headless Service is standard feature with Sitecore 10.1. Alongside this, we've released a React-based Next.js SDK for static sites. In a new blog series, we'll introduce the steps to build a sample site using the Next.js SDK over several posts.
![](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F1V85RLQxxnmpg0sOGN9v7J%2F95e417dfcc379b75335f5fdd170c641c%2Fjsssetup02.png&w=3840&q=75)
Prerequisite
The prerequisites are an understanding of the basic workings of the Sitecore Experience Platform and knowledge of building sites using JavaScript. This blog will provide a step-by-step introduction, so the goal is for you to see and understand the steps, but you will need to have the knowledge mentioned above to apply it.
The environment for the following tasks is as follows
- OS: Windows 10 or 11、macOS
- NodeJs 14.x
Sample Execution
First, download and run the samples, as there is no point if the samples do not work.
When using Sitecore JSS for the first time, you will need to install a command line. The command line is as follows
npm install -g @sitecore-jss/sitecore-jss-cli
![jsssetup01.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F302Aeo22lH0BA3JBQQuPvb%2F16ec6e51b72cad4b94e9fb22f7973ed7%2Fjsssetup01.png&w=3840&q=75)
You can now use the command jss. command to download the Next.js template.
jss create nextjs-app nextjs
![jsssetup02.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F1V85RLQxxnmpg0sOGN9v7J%2F95e417dfcc379b75335f5fdd170c641c%2Fjsssetup02.png&w=3840&q=75)
After copying the template, move the folder and run the sample application.
cd nextjs-app
jss start
![jsssetup03.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F1i1Zd9D9jlEKYDeEN9A4aV%2F10bb7fc3910f8e833750a26e246ed80e%2Fjsssetup03.png&w=3840&q=75)
Once you have reached the above screen, you can access the site. When you access http://localhost:3000, you will see the following screen.
![jsssetup04.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F6CIegHqQE3jW04A8mi3Xoh%2Fe0f54fc8be1ac7e47a7dc5df9c0460f0%2Fjsssetup04.png&w=3840&q=75)
The sample is now ready to run in your hand.
Delete template content
The sample includes a Styleguide and sample usage documentation for GraphQL. The Styleguide is included because it contains instructions on how to describe the fields in the Sitecore Experience Platform,
How to start with an empty app
To remove all of the default sample content (the Styleguide and GraphQL routes) and start out with an empty JSS app:
Delete /src/components/Styleguide* and /src/components/GraphQL*
Delete /sitecore/definitions/components/Styleguide*, /sitecore/definitions/templates/Styleguide*, and /sitecore/definitions/components/GraphQL*
Delete /data/component-content/Styleguide
Delete /data/content/Styleguide
Delete /data/routes/styleguide and /data/routes/graphql
Delete /data/dictionary/*.yml
The above data will be deleted, but the Next.js template requires the following additional work.
- Delete the following folders /src/components/fields
- As for the following two, we will keep them as they are.
- /src/components/graphql/GraphQL-ConnectedDemo.graphql
- /sitecore/definitions/components/graphql/GraphQL-IntegratedDemo.sitecore.graphql
After the deletion is complete, run it using jss start and you will see that the upper right navigation has been deleted, as shown in the following screen。
![jsssetup05.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F6gEZLTwVIWOXUzytF95X24%2F1ace6fac6a3b88b229df84f4cf9cc75d%2Fjsssetup05.png&w=3840&q=75)
Creating and switching Japanese content
The JSS template provides English and Danish samples, but no Japanese sample data. Therefore, we will create a new file and prepare default content in Japanese.
Create a new file nextjs-app/data/routes/en-jp.yml and include the following contents in the yml file
name: home
id: home-page
displayName: ホーム
fields:
pageTitle: ようこそ Sitecore JSS
placeholders:
jss-main:
- componentName: ContentBlock
fields:
heading: ようこそ Sitecore JSS
content: |
<p>サンプル</p>
Next, make two changes to the configuration so that Japanese resources can be recognized. Add "ja-JP" to the next.config.js file as the Japanese locale.
i18n: {
// These are all the locales you want to support in your application.
// These should generally match (or at least be a subset of) those in Sitecore.
locales: ['en', 'da-DK','ja-JP'],
// This is the locale that will be used when visiting a non-locale
// prefixed path e.g. `/styleguide`.
defaultLocale: packageConfig.language,
},
Next, change the following language settings listed in package.json from en to ja-JP.
"config": {
"appName": "nextjs-app",
"rootPlaceholders": [
"jss-main"
],
"sitecoreConfigPath": "/App_Config/Include/zzz",
"graphQLEndpointPath": "/sitecore/api/graph/edge",
"language": "ja-JP"
},
When the sample is executed with jss start, the screen will look like the following.
![jsssetup06.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F5RE3srF1aoCA2OwU1gczZ4%2F1a4aefcdf0e93e01e1608971daf1bb70%2Fjsssetup06.png&w=3840&q=75)
This creates the base for the Next.js sample that displays the page in Japanese.
Summary
Due to its length, this series will be divided into four parts. This is the first installment.
- Building a sample site using Next.js SDK - Part. 1
- Building a sample site using Next.js SDK - Part. 2
- Building a sample site using Next.js SDK - Part. 3
- Building a sample site using Next.js SDK - Part. 4