Next.js のプロジェクトに Search の Widget を追加する（前編）
これまでブログでは Sitecore Search SDK を利用して検索結果を表示していました。今回から数回に分けて、Next.js のプレーンな環境に対して Widget を追加していく形で、実際のどういう形で動いているのかを紹介していきます。
Next.js
Next.jsは、Reactベースのフレームワークで、Reactを使用してサーバーサイドレンダリングと静的サイト生成を可能にする機能を提供します。
ヘッダーとフッターを追加する
今回は Next.js のアプリに対してヘッダーとフッターを追加していきます。今回は特に外部との連携は入れていません。
NextUI の Dark モードを有効にする
Web サイトでライトモードとダークモードを切り替えることができるようになっています。私個人も、ダークモードを利用しています。今回はこれを NextUI で実装する手順を確認していきます。
NextUI を利用する
これまで動かしていたサンプルは、最低限のデザインも入っておらず、文字を表示する程度の動きでした。もう少し見た目をきれいにするべく、今回はプロジェクトで NextUI を利用できるようにしていきます。
Next.js に Google Tag Manager を設定する ( App Router 編 ）
前回作成をした Next.js の App Router のサンプルに対して Google Tag Manager を設定したいと思います。これを使うことで、アナリティクスもそうですが、Sitecore の他の製品との連携なども簡単にできる、というのがあります。
Next.js の App Router について
Next.js で利用しているルーティングの処理が、13.4 から新しい App Router に切り替わりました。従来の仕組みは Page Routing という形になり、従来の仕組みはもちろん利用できますが、新しい App Routing でアプリが今後主流になってきます。そこで、今回はこの App Router に関して確認をしていきます。
ローカルの Next.js のプロジェクトを XM Cloud に接続する
今回は手元にある Next.js のプロジェクトを直接 XM Cloud のインスタンスにつなげて動かす手順に関して紹介します。
Haramizu.com のサイトをリニューアルしました
しばらくサイトの更新をしていませんでしたが、コンテンツのボリュームも増えたり古い記事がそのままになっていたりと問題があったので、リニューアルをして見ました。
Sitecore 10.3 で Headless SXA を簡単に起動する
これまで数回に分けて Sitecore 10.3 のコンテナ環境、SXA の追加など手元で動かす方法を紹介してきました。毎回同じ手順を実施するのは大変なので、簡単に起動することができるリポジトリを作成しました。リポジトリを利用して起動する方法を今回は紹介します。
Next.js のプロジェクトを追加する
前回作成をしたヘッドレスのサイトはまだサイトコアのアイテムがあるだけとなっています。今回はこれに Next.js のプロジェクトを追加して、ページの編集ができるところまでの紹介をします。
ヘッドレスサイトを追加する
プロジェクトの作成、XM1 の環境整備、そして前回は SXA のモジュールのインストールをしました。今回はこのプロジェクトに対して、ヘッドレスのサイトを追加して、Next.js のプロジェクトと連携させていきます。手順が長くなるため、今回はヘッドレスのサイトを追加して、そのデータをいつでも再利用できるようにシリアライズができるところまで紹介をします。
SXA のモジュールを追加する
前回は XM1 のインスタンスを起動することができました。今回は、Next.js のプロジェクトを追加するにあたって必要となる Sitecore Experience Accelerator のモジュールをコンテナで利用できる様に追加の設定をしていきます。