すでに Web サイトのコンテンツがあって、HTML のデータがあるという際に、Next.js をベースのサイトの場合はどうすれば良いでしょうか？実は Next.js の基本的な機能を利用すれば、HTML ファイルなどを一通りサーバーにホストすることが可能です。
public フォルダの活用
Next.js のプロジェクトのトップとなるディレクトリには favicon の配置や画像などを配置する public のフォルダがあります。実はここに、 HTML のファイルを配置することができます。今回は、ここに既存の HTML のファイルを配置してみます。
HTML
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>このファイルが入っている状態で、公開をすると以下のようにページとして認識することができます。
注意すべき点は？
今回は Next.js の基本機能を紹介しましたが、Sitecore と連携している時にどのように気をつけるべきでしょうか？主に気をつける点は以下の通りです。
- 頻繁にページとして編集するページの CMS コンテンツ化
- 重要なページ（編集をしないがよく参照されるページ）は CMS コンテンツ化
- これは将来的にすぐに改善できるようにするため
- コンポーネントなどを配置して価値あるページにもできる
- たとえばヘッダー、フッターの変更に価値あるページも一緒に更新することが可能となります
- インパクトのないページに関してはそのまま配置しておく
- Google Tag Manager など、必要なタグを入れておくことでタグソリューションとの連携は可能としておく
- アナリティクスなどの連携を想定
この仕組みは、サイトの移行中で使い勝手のよい形です。一時的に古いページをサイトに入れておき、CMS の運用を開始、フェーズを分けて順次古いページを CMS 化していくという流れです。最終的に CMS 化をしないページに関しては、そもそもサイトに不要なページという形になるため、すべてのページの移行ではなく、必要なページだけ移行をする、という手続きでも利用することができます。
まとめ
今回は XM Cloud に固有の機能ではなく、Next.js に関する機能を紹介しました。この機能は便利ではありますが、大量の HTML のページを CMS と同じサイトに配置するというのは長期的に見るとあまりおすすめすることはできません。CMS 化を進めていく、将来的にはなるべく最小限に（ゼロにする必要はありません）という形だったり、凝った単発ページを置いておくだけ、とかに利用するのが良いでしょう。