Next.js+microCMSによるWeb制作を学びました！
Posted date at 2024-10-13
株式会社microCMSのエンジニアの方が書かれた書籍でNext.jsによるWebサイト制作について学びました。制作したWebサイトと使用している技術（MicroCMS）について簡単に共有します。
なお、MicoCMSについては以前電子図書アプリの学習📒でも紹介しました。
🚀学習した本
「Next.js＋ヘッドレスCMSではじめる！ かんたんモダンWebサイト制作入門 高速で、安全で、運用しやすいサイトのつくりかた」
林がかけた時間：17.5時間
🚀制作したWebサイト
簡易的なコーポレートサイトです。社員情報とニュース記事が閲覧できます。お問い合わせフォームも実装されており、内容はHubSpot📒に保存されるようになっています。
🚀学んだこと
・Next.jsでの静的なWebサイトの作り方（AppRouterのキャッシュの仕組み、サーバーアクション）
・microCMSによるコンテンツの管理（作成、編集、公開、削除、UIによるAPIの作成など）
キャッシュやパフォーマンス、SEOに関することも学びました。細かい点でOG画像の設定を学びました。以下のようにリンクを張ったときに画像が出てくるやつです。今まで実装方法を知らなかったので参考になりました。
🚀microCMSでできること
コンテンツの管理（作成、編集、下書き保存、削除）ができます。DraftKeyという仕組みがあり、フロントエンド側の実装でDraftKeyを使用することでプレビュー機能も簡単に実装できます。
作成したコンテンツのAPIの作成もUIからできます。以下は制作したWebサイトで表示している、ニュース記事の管理画面と、APIの設定画面です。
〇ニュース記事の一覧画面
〇ニュース記事の詳細（編集）画面
〇ニュース記事のAPIのスキーマ作成画面
🚀まとめ
Next.jsを使用すると爆速でSEO対策も取れたWebサイトを構築することができます。
また、microCMSはコンテンツの管理がしやすく、APIもUI操作で作成できます。両者を組み合わせることで、ユーザ体験とDevOps体験の両方が高いWebサイト制作が実現できそうです。
