【９章】microCMS導入演習の振り返り

microCMSとは

・microCMSは、日本発のヘッドレスCMSサービス

・Webサイトやアプリの「記事・お知らせ・商品情報」などのコンテンツを管理するためのクラウド型CMS　

・従来のWordPressなどのCMSとは異なり、Webサイトの「見た目（フロントエンド）」と「コンテンツ管理（バックエンド）」が分離されているのが大きな特徴

・特にNext.jsとの相性がいい

▶️　「Next.jsでフロントを作り、記事管理はmicroCMS」という使い方ができる。

microCMSのメリット・デメリット

⚪️ microCMSのメリット

１　Next.js・Reactとの相性がいい

２　非エンジニアでも記事を更新できる

３　デザインの自由度が高い

４　セキュリティ・サーバー管理が楽

▲ microCMSのデメリット

１　フロントエンドの実装知識が必要

２　ゼロからの構築コストがかかる

３　単体ではWebサイトは完成しない（コンテンツ管理部分であるため）

４　サービスへの依存（料金体系・仕様変更等）

課題取り組み時に発生したエラーについて

　私が今回課題に取り組む中で、画像が表示されないといったエラーが発生したためその原因について共有させていただきます。

１　next.config.js にドメインの許可設定がまだ反映されていなかったため

　Next.js の <Image> コンポーネント（next/image）は、セキュリティと最適化の理由から、外部サーバーの画像を表示する際に 「どのドメインからの画像を許可するか」を next.config.js で事前に設定しておく必要があります。

　しかし、images.microcms-assets.io の許可設定が追記されていなかったため、Next.js が画像を拒否してエラー（hostname "images.microcms-assets.io" is not configured）が発生していました。

２　設定ファイルを修正した後の「サーバー再起動」が行われていなかったため

　next.config.js などの設定ファイルは、Next.js 起動時に 1 度だけ読み込まれます。 コード（page.tsx など）を変更した場合は自動で反映されますが、next.config.js を書き換えた場合は、開発サーバー（npm run dev）を一度停止（Ctrl + C）して再起動するまで設定が有効になりません。

最後に

　microCMSの導入演習を通して、コードを書くだけではなく、「外部サービスを活用してコンテンツ管理を効率化する」というモダンな開発手法を学ぶことができました。

　単にAPIを呼び出すだけでなく、TypeScriptを用いた型の共通化（MicroCmsPost.ts の作成）や、外部ドメインの画像設定（next.config.js）および開発サーバー再起動の仕様など、実務でハマりやすい技術的なポイントやエラーハンドリングについても実体験として深く理解できました。

　ヘッドレスCMSは「開発の自由度が高い」「非エンジニアでも更新しやすい」という大きなメリットがある反面、フロントエンド側の知識が不可欠であり、仕様変更や外部サービスへの依存リスクといった考慮すべき点もあります。

　今後は技術の特性やメリット・デメリットを正しく理解した上で、状況に応じた最適なツール選定を行えるようにしていきたいです。