最近はReactと並行してTypescriptなどのモダンなフロントエンドを勉強しています。
今回はその中でも、ヘッドレスCMSを触ってみようと試行錯誤しました。
今回取り入れたのはヘッドレスCMSの代表格とも言えるmicroCMS。日本語のドキュメントが多いのが嬉しいです。
でも結果、表示させることすら手こずったので、メモしておきます。
ドキュメント通りにやってundefined
ヘッドレスCMSも初学者なので、とりあえず公式ドキュメント通りに進めます。
microCMS + Next.jsでJamstackブログを作ってみよう
1.Next.jsのプロジェクトを生成しておく
npx create-next-app microcms-next-jamstack-blog2.microCSMを開始する（先述の公式がわかりやすいので割愛）
3.APIキーをenvファイルで保護・・・じゃないんだわ
APIキーらしきものはあるけど、これをどこでどう使うのか。
- 適当なhtmlファイルを作成(今回はtest.html)
- 一旦microCMSでコンテンツを作る
- 下記参考サイトの見本HTMLソースをコピペ
- 自分のAPI&X-MICROCMS-API-KEYを書き換え
<!--
コピペした見本HTMLソース
fetchのURLと"X-MICROCMS-API-KEY":を自分のものに書き換えます
-->
<!DOCTYPE html>
<html lang="ja">
<body>
<main>
<h1 id="title"></h1>
<hr>
<div id="body"></div>
</main>
<script>
fetch("https://micro.microcms.io/api/v1/news/0ik_dv015", {
headers: {
"X-MICROCMS-API-KEY": "1598164e-2d58-488c-a4af-c51bd7d131a5"
}
})
.then(res => res.json())
.then(json => {
document.getElementById("title").innerHTML = json.title;
document.getElementById("body").innerHTML = json.body;
})
</script>
</body>
</html>それで表示されたのがこれ
Why Japanese people????
見本HTMLソースをよく読もう
fetch("https://micro.microcms.io/api/v1/news/0ik_dv015"エンドポイントはv1/hogehoge（任意のプロジェクト名）ですが、見本をよく見たら、後ろにもうひとつ文字列がありますね。だから思い当たる文字列を探します。
これっぽいな。コンテンツIDをfetchに追加します。
fetch("自分のエンドポイント/自分で作成したプロジェクト名/コンテンツID"書き換えたソースをファイルに貼り直すと・・・
できた！！！
とりあえず表示はできたので、これをどう生かすのか、先人たちの制作物を見ながら覚えていきたいと思います。
APIがむき出しだとセキュリティ的にまずいということで、次回はenvファイルについて調べます。
