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.

• Walkthrough: Using the JSS CLI to Get Started with JSS and Next.js

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

You can now use the command jss. command to download the Next.js template.

jss create nextjs-app nextjs

After copying the template, move the folder and run the sample application.

cd nextjs-app
jss start

Once you have reached the above screen, you can access the site. When you access http://localhost:3000, you will see the following screen.

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。

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.

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

Tags

• Next.js