Tailwind Logo

Sitecore JSS - Next.js SDK を利用してサンプルサイトを構築 - Part.1

Next.js

公開日: 2021-04-13

Sitecore 10.1 から Sitecore Headless Service は標準機能として提供することになりました。合わせて静的サイトに対応した React ベースの Next.js の SDK もリリースをしました。今回から数回に分けて、Next.JS SDK を利用してサンプルサイトを構築する手順をブログでシリーズ化して紹介をしていきます。

前提条件

前提条件として、Sitecore Experience Platform の基本的な作業を理解していること、JavaScript を利用したサイト構築に関しての知識を持っていること、という形となります。このブログでは Step by Step で紹介をしていきますので、手順をみて理解してもらうのを目的としていますが、応用する際には上記の知識が必要となります。

以下の作業をする上での環境は以下の通りです。

  • OS: Windows 10 以降、macOS
  • NodeJs 14.x  

サンプルの実行

まずサンプルが動作しなければ意味がありませんので、サンプルのダウンロード、実行をします。

初めて Sitecore JSS を利用する際にはコマンドラインをインストールする必要があります。以下の様なコマンドとなります。

PowerShell 
npm install -g @sitecore-jss/sitecore-jss-cli
jsssetup01.png

これで jss というコマンドを利用できるようになります。コマンドを利用して、Next.js のテンプレートをダウンロードをします。

PowerShell 
jss create nextjs-app nextjs
jsssetup02.png

テンプレートのコピーが終わったら、フォルダを移動して、サンプルアプリを実行します。

PowerShell 
cd nextjs-app
jss start
jsssetup03.png

上記の画面まで表示されれば、サイトにアクセスできるようになります。 http://localhost:3000 にアクセスすると、以下の様な画面となります。

jsssetup04.png

これでサンプルが手元で動く様になりました。

テンプレートのコンテンツを削除する

サンプルには Styleguide や GraphQL に関する利用方法の文書がサンプルとして入っています。スタイルガイドを利用することで、Sitecore Experience Platform のフィールドに関しての記載方法が含まれていますので、

Plain Text 
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

上記のデータを削除していきますが、Next.js のテンプレートは以下の追加作業が必要です。

  • 次のフォルダを削除 /src/components/fields
    • 以下の２つに関してはそのまま保存しておきます。
      • /src/components/graphql/GraphQL-ConnectedDemo.graphql 
      • /sitecore/definitions/components/graphql/GraphQL-IntegratedDemo.sitecore.graphql

削除完了後に jss start を利用して実行すると、以下の画面のように右上のナビゲーションが削除されているのがわかります。

jsssetup05.png

日本語のコンテンツの作成、切り替え

JSS のテンプレートでは英語、デンマーク語のサンプルがありますが、日本語のサンプルデータはありません。そこで、新しいファイルを作成して、日本語のデフォルトのコンテンツを準備していきます。

nextjs-app/data/routes/ja-jp.yml の新しいファイルを作成して、以下のコンテンツを yml ファイルに記載してください。

YAML 
name: home
id: home-page
displayName: ホーム

fields:
  pageTitle: ようこそ Sitecore JSS

placeholders:
  jss-main:
    - componentName: ContentBlock
      fields:
        heading: ようこそ Sitecore JSS
        content: |
          <p>サンプル</p>

続けて日本語リソースを認識できるように、設定を２つ変更します。 next.config.js のファイルに日本語のロケールとして、 ja-JP を追加します。

JavaScript 
  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,
  },

続いて package.json に記載されている以下の言語の設定を en から ja-JP に変更します。

JSON 
  "config": {
    "appName": "nextjs-app",
    "rootPlaceholders": [
      "jss-main"
    ],
    "sitecoreConfigPath": "/App_Config/Include/zzz",
    "graphQLEndpointPath": "/sitecore/api/graph/edge",
    "language": "ja-JP"
  },

jss start でサンプルを実行すると、以下の様な画面となります。

jsssetup06.png

これで日本語のページが表示される Next.js のサンプルのベースができました。

まとめ

長くなるためこのシリーズは４回に分けて紹介をしていきます。今回はその１回目です。

関連タグ