Next.js スターター アプリを使用して Optimizely SaaS を使い始める – コンポーネントを拡張する

Optimizely SaaS CMS概念実証（POC）ブログシリーズの最終回へようこそ。 前の記事では、SaaS インスタンスをローカルの Next.js アプリケーションと統合するように構成する方法を説明しました。これにより、SaaS インスタンスで行われたコンテンツの更新がローカルの開発環境に即座に反映されます。今回は、CMS 内でコンポーネントを拡張し、フロントエンド アプリケーションでレンダリングする方法について説明します。さらに、機能ブランチに変更を加え、これらの変更をプッシュし、Vercel ツールバー オプションを使用して Vercel でのデプロイメントを監視するワークフローについても説明します。

前提条件

1. Optimizelyのセットアップの完了 パート2
2. ビジュアルスタジオコード🡕

CMS – 新しいプロパティでブログ投稿ページタイプを拡張する

1. Optimizely SaaSにログイン
2. へ移動 Settings > Content Types。
3. 新しい文字列プロパティを追加します Reading Time(ReadingTime) に Blog post ページタイプ content タブ。変更を保存します。
4. へ移動 Settings > Scheduled Jobs 走る Optimizely Graph Delta Synchronization コンテンツの変更を同期するジョブ。
5. 案内する CMS edit > Content tree 任意のブログ投稿ページを選択し、すべてのプロパティ ビューに変更します。
6. 編集する Reading Time プロパティにサンプル値を追加し、変更内容を公開します。

Next.js – フロントエンドで新しいプロパティをレンダリングする

1. 開く appa/frontend/functions.ts ファイル。
2. 新しいプロパティを追加する readingTime 両方へ getContentById() ＆ getContentByPath() 下 BlogPostPageData フラグメント GQL クエリ。

fragment BlogPostPageData on BlogPostPage {
  blogTitle: Heading
  readingTime: ReadingTime
  blogSubtitle: ArticleSubHeading
  blogImage: BlogPostPromoImage {
    ...ReferenceData
  }
  blogBody: BlogPostBody {
    json
  }
  blogAuthor: ArticleAuthor
}

3. 開く pages/blog-post-page/index.tsx ファイル。
4. コンポーネント定義とデストラクチャリングセクションで、新しいプロパティを拡張します。 readingTime:time に BlogPostPage ページ上部のオブジェクト。

data: {
  blogTitle: title,
  blogImage: image,
  readingTime: time,
  blogBody: description,
  blogAuthor: author,
  blogSubtitle: subtitle
}

5. CMS編集可能なレンダリング構造で、新しい レンダリングするコンポーネント readingTime 財産。

CmsEditable
  cmsFieldName="ReadingTime"
  as="p"
  className="mb-[24px] text-[12px]"
>
  {time ?? ""}
CmsEditable>

6. 変更を保存して実行し、フロントエンドで新しいプロパティの変更を確認します。 https://localhost:3000。
7. アプリケーションがローカル開発環境を使用するように構成されているOptimizely SaaSにログインします。 https://localhost:3000。
8. CMS編集で、任意のブログ投稿ページに移動し、 Reading Time インライン編集機能を使用してプロパティを編集します🎉。

Vercel – Vercelに変更を展開する

Vercel の Git 統合により、機能ブランチの各プルまたはマージ リクエストに対してプレビュー デプロイメントが自動的に生成されるため、開発プロセスが効率化されます。この機能により、開発者はメイン ブランチにマージする前に、隔離された環境で新機能や変更を徹底的に評価できます。コメント機能により、これらのプレビュー環境でリアルタイムのフィードバックが可能になり、コラボレーションが強化されます。さらに、Vercel ダッシュボードでは、特定のコミットやブランチからの最新の変更をデプロイする柔軟性が提供されるため、開発者はデプロイメントを正確に制御できます。

1. Git を使用して、前の手順で行った変更用の新しい機能ブランチを作成します。
2. 機能ブランチの変更をコミットし、変更をリモート リポジトリにプッシュします。
3. Vercel ダッシュボードに移動し、プロジェクトを選択して、アクティブ ブランチに移動し、進行中の新しい機能ブランチ ビルドを表示します。
4. ビルドが完了すると、素晴らしい Vercel ツールバーを使用して、新しい変更が Vercel 機能ブランチ環境に自動的にデプロイされます。

追加の調査: Vercelは機能フラグの包括的なサポートを提供しています。 ドキュメンテーション 詳細については！

機能フラグと機能ブランチ ビルドを組み合わせることで、開発者はリスクを最小限に抑え、開発プロセス全体を改善しながら、安全に実験し、A/B テストを実施し、新しい機能を段階的に展開することができます。

結論

Optimizely SaaS CMS 概念実証 (POC) ブログ シリーズの最終セグメントでは、高度な機能を使用して CMS エクスペリエンスを強化することに焦点を当てて締めくくります。ローカルの Next.js アプリケーションとシームレスに統合するように SaaS インスタンスを構成した前回の説明に基づいて、CMS コンポーネントを拡張し、フロントエンド アプリケーションでこれらの拡張機能をレンダリングする方法について詳しく説明します。この最後の投稿では、機能ブランチの管理、更新のプッシュ、および Vercel ツールバーを使用したデプロイメントの監視のプロセスについても説明します。最後には、Optimizely SaaS CMS を最大限に活用して、合理化された開発ワークフローと効率的なコンテンツ管理を確実に行う方法を総合的に理解できるようになります。

参考文献

特別な感謝 レムコ、 パトリック 貴重な貢献とドキュメントを提供してくれた Opti Slack コミュニティに感謝します。