Published on2022年5月19日Sitecore Helix の Next.js サンプルを動かす - 準備デモNext.jsDockerSitecore が提供しているデモ Sitecore Helix に、Next.js をベースにしたサンプルが含まれています。今回は、このサンプルを動かすところまでの手順を紹介していきます。なお、今回は設定までとして、実際にコンテナを起動するのは次回紹介する予定です。
Published on2022年5月12日Sitecore Headless - Next.js Tips シリーズNext.jsHeadlessNext.js の SDK を利用して Sitecore をヘッドレス CMS で開発をする際の各種ヒントを個別のトピックとして紹介しています。ここでは一覧で表示していますので参考にしてください。
Published on2022年4月21日ルートアイテムの作成Next.jsHeadlessこれまで Next.js ベースのサンプルとして作成していたアイテムは JSS のサンプルをインポートした時のルートアイテムをベースに作成をしていました。今回はルートアイテムに相当するものを作成する手順を紹介して行きます。
Published on2022年4月15日プレースホルダーの作成Next.jsHeadlessSitecoreXMSitecore でレイアウトのエリアに関して、名前をつける機能をプレースホルダーという形で定義することができます。これを利用することで、プレースホルダーに配置することができるコンポーネントの制限をしたり、プレースホルダーを階層化して管理することができるようになります。今回はこのプレースホルダーの考え方、そして作り方を紹介していきます。
Published on2022年4月14日コンポーネントの作成とテンプレート連携 - ファイル編Next.jsHeadlessコンポーネント作成シリーズの最後として、ファイルを指定することができるファイルコンポーネントを作成します。ファイル自体はメディアライブラリにあるファイルを指定する形となりますが、データとしてどういう形で取得することができるのか、というのを確認するのが主な目的です。
Published on2022年4月13日コンポーネントの作成とテンプレート連携 - コンテンツリスト編Next.jsHeadless今回はコンテンツリストを利用したコンポーネントを作成していきます。コンテンツリストは、Sitecore のアイテムを複数指定して、それらのデータを一括で利用したいというケースで使い勝手の良いものです。よくあるケースとしては、Meta タグで利用するキーワードを選択できるようにする、といったニーズにも使えます。
Published on2022年4月12日コンポーネントの作成とテンプレート連携 - チェックボックス編Next.jsHeadlessこれまで紹介をしていたデータの形式は一般的なデータとして利用することが多い項目でしたが、今回はチェックボックスを紹介する地味なトピックとなります。
Published on2022年4月7日コンポーネントの作成とテンプレート連携 - リンクフィールド編Next.jsHeadlessWeb サイトのデータとして重要になってくるのがコンテンツの次にリンクになります。この部分の記述をコンポーネントではどう言った形で記述するのかを今回は紹介していきます。
Published on2022年4月6日コンポーネントの作成とテンプレート連携 - 日付と数字編Next.jsHeadless日付、数字に関してはテキストのフィールドを利用して管理することもできますが、Sitecore のフィールドとしては日付、時間、数字を設定することが可能です。今回はこれらの項目を利用してコンテンツを構成できるように、フィールドの使い方を紹介していきます。
Published on2022年4月5日コンポーネントの作成とテンプレート連携 - 画像編Next.jsHeadless前回はテキストに関するフィールド形式を利用して、テンプレートを作成しました。今回は画像を指定できるコンポーネントを作成していきます。
Published on2022年4月4日コンポーネントの作成とテンプレート連携 - テキスト編Next.jsHeadlessSitecore のコンテンツ管理の仕組みとしては、コンテンツのデータ構造を定義する仕組みとしてテンプレートという仕組みを提供しています。今回はデータの持ち方を定義して、どのように呼び出しをするのかについてテンプレートを作成、データの表示について紹介をしていきます。なお、このサンプルコードは Styleguide のサンプルデータとして含まれているものを紹介していく形となります。
Published on2022年3月25日コンポーネントの作成Next.jsHeadlessSitecore と連携している環境の準備ができていれば、コンポーネントの追加に関しての手順は非常に簡単なものです。今回は、jss scaffold のコマンドを利用することなく、コンポーネントを追加することで、どういう形でコンポーネントを管理しているのか、を確認します。
Published on2022年3月24日多言語サイトのコンテンツに切り替えるNext.js多言語Next.js のテンプレートはすでに多言語対応のモジュールが入っているため、Sitecore 側の設定を追加することで比較的簡単に言語を増やすことができます。そこで今回は、日本語のリソースを追加したいと思います。
Published on2022年3月18日Hero エリアの部品を作成する(後編)tailwind.cssNext.jsHeadless前回は新しいコンポーネントを作成して配置しましたが、まだ見た目は普通に HTML が表示されている程度の Tailwind CSS のデザインになっています。今回は見た目を少し変更するのと、合わせてコンテンツの属性を少し変更したいと思います。
Published on2022年3月16日Hero エリアの部品を作成する(前編)Next.jsHeadless前回の記事でヘッダー、フッターのエリアを整理しました。今回はトップページで利用する Hero エリアのコンポーネントを新規に作成していきます。この手順を通じて、新しいコンポーネントの作り方を学んでいきます。
Published on2022年3月15日ナビゲーションを分離するtailwind.cssNext.jsHeadless前回は Tailwind CSS を利用できるところまで実施しました。今回はこれを利用する前に、レイアウトの中に記載されているナビゲーションのコードを別のファイルに分離する手順を確認していきます。
Published on2022年3月14日Tailwind.css を Next.js のサンプルに適用するtailwind.cssNext.jsHeadlessNext.js のサンプルは CSS のスタイルシートとして bootstrap が標準で設定されています。CSS のスタイルシートはさまざまなものが提供されていますが、今回は Tailwind CSS を利用する形に切り替えていきます。
Published on2022年2月25日Next.js に Google Tag Manager を設定するNext.jsGoogle-Tag-Manager今回は少し趣向を変えて Sitecore ではなく Next.js で Google Tag Manager を適用するための手順を紹介します。テストも含めて、実施していきます。
Published on2022年2月22日Sitecore Headless - Sitecore First に変更するSitecoreHeadlessNext.jsこれまで Sitecore の SDK のサンプルのコードを展開するところにフォーカスしていましたが、ここからは Sitecore で作業をしてコードで補完する形の開発をしていく手順に切り替えていきます。後半では以前に紹介をした空っぽのプロジェクトを作る手順を改めて確認して、実際につながるところまで進めていきます。
Published on2022年2月21日Sitecore Headless - Next.js ステージングの追加SitecoreHeadlessNext.js前回の記事で、Next.js のサンプルを Sitecore に展開、また実際のデリバリーとして Vercel と連携する形まで用意をしました。今回は、もう少しテスト、検証をしやすくするためにプロダクションとステージング環境を分けて、ローカルでもテストする手順を紹介をしていきます。
Published on2022年2月18日Sitecore Headless - Next.js 評価環境の構築SitecoreHeadlessNext.jsブログでこれまでヘッドレスに関しての情報を提供していました。手順に関してはリンクを貼りながら紹介していきつつ、テスト環境を素早く立ち上げる手順について今回は紹介をします。
Published on2021年12月22日Next.js のサンプルデータが含まれないプロジェクトの作成SitecoreHeadlessNext.jsサイトコアの新しいバージョンとなる 10.2 のリリースに合わせて Sitecore Headless Services のバージョンも 19.0.0 に変わりました。この際、Next.js のサンプルデータが入っていないプロジェクトの作成の手順が追加されました。毎回最初のステップでデータを削除するところを省略できるので、今回はこれについて紹介をします。
Published on2021年10月29日Sitecore ヘッドレス と Next.js でサイト構築 - コンポーネントの追加JSSNext.jsHeadless前回は Sitecore のインスタンスの設定および Vercel での動作まで進めました。今回は立ち上げたサンプルのサイトに関して、すでに入っているコンテンツの整理、またそれを表示するために定義されている内容などを削除して、空っぽのプロジェクトまで仕上げていきます。
Published on2021年10月27日Sitecore ヘッドレス と Next.js でサイト構築 - 空プロジェクトの作成JSSNext.jsHeadless前回は Sitecore のインスタンスの設定および Vercel での動作まで進めました。今回は立ち上げたサンプルのサイトに関して、すでに入っているコンテンツの整理、またそれを表示するために定義されている内容などを削除して、空っぽのプロジェクトまで仕上げていきます。
Published on2021年10月21日Next.js Commerce と OrderCloud の連携 - Middleware と Seller の追加(後編)OrderCloudNext.jsHeadlessNext.js Commerce と Sitecore OrderCloud の連携で簡単にサイトに管理画面を追加する手順、前回はローカルで動くところまででしたので、今回は最後まで進めていきたいと思います。
Published on2021年10月20日Next.js Commerce と OrderCloud の連携 - Middleware と Seller の追加(前編)OrderCloudNext.jsHeadlessNext.js Commerce と Sitecore OrderCloud の連携で簡単にサイトが立ち上がることがわかりました。あとは管理画面、ミドルウェア部分がポイントになりますが、これに関しては Headstart のサンプルを追加していきたいと思います。
Published on2021年10月19日Next.js Commerce と OrderCloud の連携OrderCloudNext.jsHeadless2021 年 10 月最初の週に実施された Sitecore Symposium 2021 にて発表された Sitecore OrderCloud のテンプレートとして、Next.js Commerce との連携ができるようになりました。これにより、汎用的な Web サイトのテンプレートを使って開発をしていくことができるようになります。今回はその手順に関して紹介をしていきます。
Published on2021年9月9日Sitecore ヘッドレス と Next.js でサイト構築 - Vercel 環境の構築JSSNext.jsHeadlessVercelこれまで Next.js のサンプルの使い方を何回か紹介をしてきました。詳細に関しては過去の記事も参照していただく形となりますが、今回はサイト構築をする際の構成について、便利な機能 Vercel と組み合わせた場合どういう開発になるのかを紹介していきます。
Published on2021年5月15日ブログをリニューアルしましたNext.jsDocusaurus も v2 beta になったのと慣れはし始めたのですが、お仕事で Next.js を利用することが増えてきそうなので、ベースを切り替えてみました。
Published on2021年4月20日Sitecore JSS - Next.js SDK を利用してサンプルサイトを構築 - Part.4JSSNext.js前回はエクスペリエンスエディターを利用した設定に関して紹介をしました。Next.js のアプリを作っていく際に、Sitecore で管理しているコンテンツを使いながら開発することはできるのでしょうか?今回は開発中に Sitecore のデータを参照する設定について、紹介します。
Published on2021年4月19日Sitecore JSS - Next.js SDK を利用してサンプルサイトを構築 - Part.3JSSNext.jsこれまで2回にわたって基本的なポイントを紹介していましたが、今回は Next.js で作っているページを Sitecore のみたまま編集ツールであるエクスペリエンスエディターと組み合わせて動かす手順を紹介します。
Published on2021年4月16日Sitecore JSS - Next.js SDK を利用してサンプルサイトを構築 - Part.2JSSNext.js前回は、Next.js のテンプレートからサンプルデータを削除して、日本語のコンテンツを表示するところまで紹介をしました。今回は、このサンプルのサイトを Sitecore Experience Platform と連携させる手順を紹介します。
Published on2021年4月13日Sitecore JSS - Next.js SDK を利用してサンプルサイトを構築 - Part.1JSSNext.jsSitecore 10.1 から Sitecore Headless Service は標準機能として提供することになりました。合わせて静的サイトに対応した React ベースの Next.js の SDK もリリースをしました。今回から数回に分けて、Next.JS SDK を利用してサンプルサイトを構築する手順をブログでシリーズ化して紹介をしていきます。