XM Cloud - sxastarter の Path の記述を @/ に統一する
XM Cloud のサンプルとなる sxastarter ではよく利用するパスに関して、簡単に指定できるように tsconfig.json で path の定義が追加されています。これを今回は個人の好みですが、 @/ で記述する形に統一していきます。
Next.jsは、Reactベースのフレームワークで、Reactを使用してサーバーサイドレンダリングと静的サイト生成を可能にする機能を提供します。
XM Cloud のサンプルとなる sxastarter ではよく利用するパスに関して、簡単に指定できるように tsconfig.json で path の定義が追加されています。これを今回は個人の好みですが、 @/ で記述する形に統一していきます。
前回まで、ブログの URL を決めるために Dynamic Routes を利用してページの URL を決めて、4つ目のパスを Slug として扱う形で作成しました。今回は、日付を利用してそのパスも確定するようにしていきます。
前回、ブログの個別のページに関して、Dynamic Route で ID を利用して作成する手順を紹介しました。今回はもう1つ改善して、URL のパスに日付と Slug を利用して処理できるように進めていきます。
ブログの記事に関してそれぞれのページを用意したいと思います。前編では ID を利用して URL を作成する形で作っていきます。
前回はブログのタイトルの取得を page.tsx ファイルで利用しましたが、ブログのデータを取得する部分に関して分けて再利用しやすく実装をしていきます。
Next.js には fetch の機能を利用して、外部のデータを取得して処理をするための仕組みが含まれています。今回はこれを利用して、Blog のタイトルを取得したいと思います。
Content Hub ONE と連携するサンプルアプリケーションとして、Next.js を利用してデモを作成していきます。
前回は純粋な Next.js のプロジェクトに対して、XM Cloud で利用しているスタイルシートを適用した形で進めていきました。今回は Storybook をプロジェクトに追加します。
Headless SXA でコンポーネントを作成する前に、Next.js で動作するコンポーネントの開発ができるように、別の Next.js のプロジェクトを今回は作成します。
前回の記事までで、XM Cloud に対象となるアイテムのテンプレートを作成、サンプルのアイテムを GraphQL を利用して Json のデータで取得することができました。今回は後半で、RSS でデータが見れるようにしていきます。
今回は XM Cloud のコンテンツに関して、GraphQL から記事の一覧を取得して RSS フィードを作成する手順を紹介します。
前回作成をしたアプリはローカルで動作していました。今回はローカルではなく Vercel に展開してログインできるように進めていきます。
Showing 1 to 12 of 81 results