Logo

Next.js

Next.jsは、Reactベースのフレームワークで、Reactを使用してサーバーサイドレンダリングと静的サイト生成を可能にする機能を提供します。

App screenshot

Nodemailer を利用して Next.js のプロジェクトからメールを送信する

前回は nodemailer を利用してメールを送信する仕組みを確認しました。今回は、Next.js のプロジェクトを作成して、React Email および Nodemailer が連携できるような形で実装を進めていきます。今回は、React Email のリソースを追加しておきますが、主に API を利用してメールを送信するサンプルまで仕上げます。なお、Moosend でも Sitecore Send でも同じコードで動作します。


Next.js OpenAI Starter を Azure OpenAI と連携させる

これまで ChatGPT との連携を前提として進めてきましたが、Next.js OpenAI Starter は Azure Open AI とも連携が可能です。今回は、ChatGPT の API キーではなく、Azure Open AI との連携する方法を検証していきます。





Next.js OpenAI Starter を動かす

ChatGPT と連携する Chatbot のサンプルである Next.js OpenAI Starter のテンプレートを動かすまでの手順を今回まとめておきます。









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 に関して確認をしていきます。






ヘッドレスサイトを追加する

プロジェクトの作成、XM1 の環境整備、そして前回は SXA のモジュールのインストールをしました。今回はこのプロジェクトに対して、ヘッドレスのサイトを追加して、Next.js のプロジェクトと連携させていきます。手順が長くなるため、今回はヘッドレスのサイトを追加して、そのデータをいつでも再利用できるようにシリアライズができるところまで紹介をします。


SXA のモジュールを追加する

前回は XM1 のインスタンスを起動することができました。今回は、Next.js のプロジェクトを追加するにあたって必要となる Sitecore Experience Accelerator のモジュールをコンテナで利用できる様に追加の設定をしていきます。


新しいプロジェクトを作成する

新年あけましておめでとうございます。今年も Sitecore に関する技術的な情報をブログで提供していきたいと思います。実は Sitecore の技術情報は日本語で多く提供しているのですが、いざ始めるとなるとどこから手を付けていいのか悩ましいですよね。ということで、新年最初の投稿は、新しいプロジェクトをサクッと作るところを紹介します。


HTML のページを追加する

すでに Web サイトのコンテンツがあって、HTML のデータがあるという際に、Next.js をベースのサイトの場合はどうすれば良いでしょうか?実は Next.js の基本的な機能を利用すれば、HTML ファイルなどを一通りサーバーにホストすることが可能です。


Headless SXA - 新規コンポーネントの追加

前回は既存のコンポーネントの表示形式を増やすだけでしたが、今回は新しいコンポーネントを作成します。これにより、各企業で求めているデータ構造に対してのレイアウト作成という形で、Sitecore でデータ形式の定義をして、見た目の部分を実装するという部分のイメージが湧くかと思います。



Headless SXA の紹介

Sitecore が提供する Web サイトのコンポーネント集となる Sitecore Experience Accelerator のヘッドレス版となる Headless SXA の提供を開始しました。このコンポーネントは Sitecore XM 10.3 でも利用できるようになっていますので、既存の Sitecore のサブスクリプションライセンスを利用の場合も同じように利用することが可能です。



Experience Edge を利用して Vercel に展開する

これまでサーバーとして Sitecore を仮想マシンとして起動していましたが、エンドポイントとして Sitecore Experience Edge というサービスを展開しており、これを利用することで Next.js のアプリを Vercel に簡単に展開することができます。今回はその展開手順に関して紹介をします。





Sitecore Headless 開発、テスト環境の構築 Part 6 - エクスペリエンス エディターを利用できるようにする

前回は Node.js をベースとしたコンテナを立ち上げて、そのコンテナで Next.js を起動しました。Next.js は Sitecore からデータを取得してページを表示している形です。今回は、Sitecore が Node.js のコンテナに接続して、エクスペリエンスエディターが起動するところまで進めていきます。


Sitecore Headless 開発、テスト環境の構築 Part 5 - Node.js コンテナの追加

これまで紹介してきた内容は、 Sitecore をコンテナで起動、その後テンプレートを追加、サーバーでの動作というところまで進めてきました。サーバーの環境では、Vercel を利用してページの編集、確認ができるようにしましたが、ローカルのコンテナの環境では Vercel の部分が不足している形となります。そこで今回は、この部分を Node.js のコンテナを追加して同じように動作する設定を作成します。



Vercel に展開する

これまで作成をしてきた Web サイトを Vercel に展開したいと思います。シリーズの最初の頃に立ち上げたサーバーに対してサンプルのデータを展開、合わせて Vercel に展開する手順を紹介していきます。


Next.js サンプルサイトの追加(後編)

前々回に Next.js のテンプレートの準備を、前回はそれを利用するための Sitecore にアイテムをインポートする手順を紹介しました。今回は Next.js の設定を変更して、Sitecore のアイテムを参照してページが表示されるところまで紹介をします。


Next.js サンプルサイトの追加(前編)

4回に分けて作成をしてきた環境にはまだ Next.js のプロジェクトがないため、サンプルサイトを追加していきます。プロジェクトにコードを追加する形です。この手順は2回に分けて紹介をしていく予定です。今回は、まず Next.js のサンプルが動くところまで進めていきます。



Sitecore Helix の Next.js サンプルを動かす - 準備

Sitecore が提供しているデモ Sitecore Helix に、Next.js をベースにしたサンプルが含まれています。今回は、このサンプルを動かすところまでの手順を紹介していきます。なお、今回は設定までとして、実際にコンテナを起動するのは次回紹介する予定です。


Sitecore Headless - Next.js Tips シリーズ

Next.js の SDK を利用して Sitecore をヘッドレス CMS で開発をする際の各種ヒントを個別のトピックとして紹介しています。ここでは一覧で表示していますので参考にしてください。


ルートアイテムの作成

これまで Next.js ベースのサンプルとして作成していたアイテムは JSS のサンプルをインポートした時のルートアイテムをベースに作成をしていました。今回はルートアイテムに相当するものを作成する手順を紹介して行きます。


コンポーネントの作成とテンプレート連携 - ファイル編

コンポーネント作成シリーズの最後として、ファイルを指定することができるファイルコンポーネントを作成します。ファイル自体はメディアライブラリにあるファイルを指定する形となりますが、データとしてどういう形で取得することができるのか、というのを確認するのが主な目的です。


コンポーネントの作成とテンプレート連携 - コンテンツリスト編

今回はコンテンツリストを利用したコンポーネントを作成していきます。コンテンツリストは、Sitecore のアイテムを複数指定して、それらのデータを一括で利用したいというケースで使い勝手の良いものです。よくあるケースとしては、Meta タグで利用するキーワードを選択できるようにする、といったニーズにも使えます。




コンポーネントの作成とテンプレート連携 - 日付と数字編

日付、数字に関してはテキストのフィールドを利用して管理することもできますが、Sitecore のフィールドとしては日付、時間、数字を設定することが可能です。今回はこれらの項目を利用してコンテンツを構成できるように、フィールドの使い方を紹介していきます。



コンポーネントの作成とテンプレート連携 - テキスト編

Sitecore のコンテンツ管理の仕組みとしては、コンテンツのデータ構造を定義する仕組みとしてテンプレートという仕組みを提供しています。今回はデータの持ち方を定義して、どのように呼び出しをするのかについてテンプレートを作成、データの表示について紹介をしていきます。なお、このサンプルコードは Styleguide のサンプルデータとして含まれているものを紹介していく形となります。


コンポーネントの作成

Sitecore と連携している環境の準備ができていれば、コンポーネントの追加に関しての手順は非常に簡単なものです。今回は、jss scaffold のコマンドを利用することなく、コンポーネントを追加することで、どういう形でコンポーネントを管理しているのか、を確認します。


多言語サイトのコンテンツに切り替える

Next.js のテンプレートはすでに多言語対応のモジュールが入っているため、Sitecore 側の設定を追加することで比較的簡単に言語を増やすことができます。そこで今回は、日本語のリソースを追加したいと思います。


Sitecore Horizon のインストール

これまで Sitecore の編集環境としてはコンテンツエディター、エクスペリエンスエディターと2つのツールを利用していました。全体を見渡すことができるコンテンツエディター、見たまま編集を実現するエクスペリエンスエディターという位置付けです。今回紹介をする Sitecore Horizon はその2つのいいところ取りの製品になります。


Hero エリアの部品を作成する(後編)

前回は新しいコンポーネントを作成して配置しましたが、まだ見た目は普通に HTML が表示されている程度の Tailwind CSS のデザインになっています。今回は見た目を少し変更するのと、合わせてコンテンツの属性を少し変更したいと思います。


Hero エリアの部品を作成する(前編)

前回の記事でヘッダー、フッターのエリアを整理しました。今回はトップページで利用する Hero エリアのコンポーネントを新規に作成していきます。この手順を通じて、新しいコンポーネントの作り方を学んでいきます。


ナビゲーションを分離する

前回は Tailwind CSS を利用できるところまで実施しました。今回はこれを利用する前に、レイアウトの中に記載されているナビゲーションのコードを別のファイルに分離する手順を確認していきます。


Tailwind.css を Next.js のサンプルに適用する

Next.js のサンプルは CSS のスタイルシートとして bootstrap が標準で設定されています。CSS のスタイルシートはさまざまなものが提供されていますが、今回は Tailwind CSS を利用する形に切り替えていきます。



Sitecore Headless - Next.js ステージングの追加

前回の記事で、Next.js のサンプルを Sitecore に展開、また実際のデリバリーとして Vercel と連携する形まで用意をしました。今回は、もう少しテスト、検証をしやすくするためにプロダクションとステージング環境を分けて、ローカルでもテストする手順を紹介をしていきます。



Next.js のサンプルデータが含まれないプロジェクトの作成

サイトコアの新しいバージョンとなる 10.2 のリリースに合わせて Sitecore Headless Services のバージョンも 19.0.0 に変わりました。この際、Next.js のサンプルデータが入っていないプロジェクトの作成の手順が追加されました。毎回最初のステップでデータを削除するところを省略できるので、今回はこれについて紹介をします。