技術メモ
Next.js と Tailwind CSS でダークモードの実装
サイトを実装するときに、企業向けはあまり利用されませんが、それ以外に多いダークモードの実装を、Next.js と Tailwind CSS を利用して実装します。
← カテゴリー一覧に戻る
カテゴリ
技術情報 (ページ 2)
技術メモ
利用する関連パッケージのインストール
前回は Next.js のトップページでブログのタイトルを取得するところまで進めました。今回は、ブログを作っていくにあたって手持ちのライブラリなどを追加して環境を整えて行きます。
技術メモ
HTMLを Portable Text に変換する
ここでは Wordpress のコンテンツエリアで管理をしている RichText のデータを Portable Text 形式に変換して、Sanity のコンテンツとして利用するための手順をまとめています。
技術メモ
WordPress からの移行について
このシリーズでは Wordpress のサイトのコンテンツを Sanity に移行する手順を紹介していきます。まず最初のステップとして、今回は作業をする環境を紹介していきます。
技術メモ
Studio の準備とスキーマタイプ
前回の前提条件のところで Wordpress に関する環境のチェックが終わっていれば、早速作業に入りましょう。今回は、CMS の環境となる Studio の作成と、コンテンツスキーマの準備になります。
技術メモ
移行スクリプトの準備
Wordpress から Sanity にコンテンツを移行するための受け皿の準備が完了したので、サンプルとして提供されているマイグレーションのスクリプトを利用していきます。
技術メモ
投稿タイプの処理
前回の手順で、ブログの記事一覧を取得して Sanity Studio で投稿一覧を参照することができるようになりました。今回は投稿しているコンテンツについてもう少し細かく処理をしていきます。
技術メモ
アセットのアップロード
この記事では、Wordpress のサービスにアップロードしている画像などをアップロードしていきます。なお、公式の手順は自分で Wordpress をホスティングをしている、もしくは有償のプランのみの手続きとなるため、ここでは別の手順で進めます。
技術メモ
iCloud メールでカスタムメールドメインを利用する
iCloud+ を利用している場合、見逃しがちなカスタムドメインを利用することができる機能です。この機能を利用すれば、ドメインの維持費用は別途かかりますが、メールに関しての部分は設定さえしてしまえば、独自ドメインを利用してメールを利用することができます。ここではこの手順を紹介します。
技術メモ
Sanity Studio の起動
ここでは公式ガイドの前提条件と次のステップに関して紹介をします。このステップが完了した時には、Sanity の管理画面となる Sanity Studio にアクセスすることが可能となります。
技術メモ
GROQ を学ぶ
Sanity に保存しているデータを取得する仕組みとして、GraphQL 以外に GROQ という仕組みが提供されています。今回は、この GROQ に関して動作確認をしていきます。
技術メモ
Next.js との連携
前回は Sanity Studio の Vision を利用して、GROQ を利用したクエリーから必要となるコンテンツの取得ができました。今回は、Next.js から同様の処理を実行して Web のコンテンツとして利用する方法を紹介します。
技術メモ
タイプの生成
前回はサンプルのコードとして完結させるために、Typescript で利用する Type を手作業で作成をしました。今回は、定義しているフィールドに関しての Type を生成します。
技術メモ
コンテンツアプリケーションの作成
多くのケースでは Sanity Studio の管理画面を利用してコンテンツの編集をしますが、用途によってはコンテンツを編集するためのアプリケーションを用意する方が良い場合があります。今回はこれに対応したアプリケーションの作成を実践します。
技術メモ
Sanity 概要
Sanity は、高い柔軟性を持つヘッドレスCMSで、構造化コンテンツの管理に優れています。カスタムスキーマを TypeScript で定義でき、リアルタイムな共同編集や豊富なAPI連携が可能です。このコースでは、Sanity のチュートリアルを参考にしながら、どのような製品か紹介をしていきます。
技術メモ
Next.js + Storybook
この文書では、Next.js のプロジェクトに Storybook を追加して利用する方法を紹介します。Storybook を利用すると、事前に用意したデータを利用してコンポーネントを表示することができるため、プログラムの開発と並行してコンポーネントの UI を作成していくことができます。
技術メモ
Embla Carousel を Next.js で利用する
Web サイトのトップページやナビゲーションなどで利用されるスライドするコンポーネント、Carousel を Next.js App Router に実装します。今回は、Embra Carousel を利用します。