エクスペリエンス エディターを利用できるようにする
前回は Vercel に新しいサイトを展開することができました。このインスタンスを利用して、エクスペリエンスエディターでページの編集をできるように進めていきます。
Next.js
Next.jsは、Reactベースのフレームワークで、Reactを使用してサーバーサイドレンダリングと静的サイト生成を可能にする機能を提供します。
Vercel に展開する
これまで作成をしてきた Web サイトを Vercel に展開したいと思います。シリーズの最初の頃に立ち上げたサーバーに対してサンプルのデータを展開、合わせて Vercel に展開する手順を紹介していきます。
Next.js サンプルサイトの追加（後編）
前々回に Next.js のテンプレートの準備を、前回はそれを利用するための Sitecore にアイテムをインポートする手順を紹介しました。今回は Next.js の設定を変更して、Sitecore のアイテムを参照してページが表示されるところまで紹介をします。
Next.js サンプルサイトの追加（前編）
４回に分けて作成をしてきた環境にはまだ Next.js のプロジェクトがないため、サンプルサイトを追加していきます。プロジェクトにコードを追加する形です。この手順は２回に分けて紹介をしていく予定です。今回は、まず Next.js のサンプルが動くところまで進めていきます。
Sitecore Helix の Next.js サンプルを動かす - コンテナを起動する
前回は環境を準備するところまでとして、コンテナを起動することはありませんでした。今回は、サンプルを実行するためのスクリプト up.ps1 を参考にしながらどういう形でコンテナを起動することになるのかを確認していきます。
Sitecore Helix の Next.js サンプルを動かす - 準備
Sitecore が提供しているデモ Sitecore Helix に、Next.js をベースにしたサンプルが含まれています。今回は、このサンプルを動かすところまでの手順を紹介していきます。なお、今回は設定までとして、実際にコンテナを起動するのは次回紹介する予定です。
Sitecore Headless - Next.js Tips シリーズ
Next.js の SDK を利用して Sitecore をヘッドレス CMS で開発をする際の各種ヒントを個別のトピックとして紹介しています。ここでは一覧で表示していますので参考にしてください。
ルートアイテムの作成
これまで Next.js ベースのサンプルとして作成していたアイテムは JSS のサンプルをインポートした時のルートアイテムをベースに作成をしていました。今回はルートアイテムに相当するものを作成する手順を紹介して行きます。
コンポーネントの作成とテンプレート連携 - ファイル編
コンポーネント作成シリーズの最後として、ファイルを指定することができるファイルコンポーネントを作成します。ファイル自体はメディアライブラリにあるファイルを指定する形となりますが、データとしてどういう形で取得することができるのか、というのを確認するのが主な目的です。
コンポーネントの作成とテンプレート連携 - コンテンツリスト編
今回はコンテンツリストを利用したコンポーネントを作成していきます。コンテンツリストは、Sitecore のアイテムを複数指定して、それらのデータを一括で利用したいというケースで使い勝手の良いものです。よくあるケースとしては、Meta タグで利用するキーワードを選択できるようにする、といったニーズにも使えます。
コンポーネントの作成とテンプレート連携 - チェックボックス編
これまで紹介をしていたデータの形式は一般的なデータとして利用することが多い項目でしたが、今回はチェックボックスを紹介する地味なトピックとなります。
コンポーネントの作成とテンプレート連携 - リンクフィールド編
Web サイトのデータとして重要になってくるのがコンテンツの次にリンクになります。この部分の記述をコンポーネントではどう言った形で記述するのかを今回は紹介していきます。