microCMSとNext.jsで記事を分割して作ったらうまく作れた話

nagoya.ts#3で登壇しました
「microCMSとNext.jsで記事を分割して作ったらうまく作れた話」
https://nagoyats.connpass.com/event/336678/

Transcript

1. © 2023 Ateam Inc. microCMSとNext.jsで記事を 分割して作ったらうまく作れた話 宮﨑 海斗
2. © 2023 Ateam Inc. ⾃⼰紹介 宮﨑 海斗 株式会社エイチームライフデザイン 2021年入社 フロントエンドエンジニア Next.jsやReactを主に触っています Vimmer VimとロードバイクとPCゲームが好き 休日は引きこもってゲームや開発か、󰣤で家の近くの峠を走ってます 先月は琵琶湖一周してきました 2
3. © 2023 Ateam Inc. 記事サイトをみなさんはどう作ってますか ? 3
4. © 2023 Ateam Inc. 4 ヘッドレスCMSをNext.jsと組み合わせて作りたい
5. © 2023 Ateam Inc. HTMLやMarkdownをひとつのコンテンツとして 管理するのしんどくないですか ? 5
6. © 2023 Ateam Inc. 6 CMSではよく⼀つの本⽂で管理していますよね
7. © 2023 Ateam Inc. 7 要件に合わないことがある HTML • パースしにくいこと • 深いネストに対応できない • 想定外の属性 Markdown • 細かいことができない • 属性を付けられない
8. © 2023 Ateam Inc. 8 ここまでの課題のまとめ Next.jsと一般的なHeadless CMSを組み合わせて使いたいけど・・・ • HTMLやMarkdownと合わせるにはやりとりしにくい • 一つのコンテンツとして出力されるのでパースしにくい
9. © 2023 Ateam Inc. ComponentをCMSで管理できるといいのではないか? 9
10. © 2023 Ateam Inc. 10 ComponentをCMSで管理できるといいのではないか?
11. © 2023 Ateam Inc. 11 ComponentをCMSで管理できるといいのでは?
12. © 2023 Ateam Inc. microCMSとNext.jsで記事を 分割して作ったらうまく作れた話 宮﨑 海斗
13. © 2023 Ateam Inc. 13 microCMSを使う
14. © 2023 Ateam Inc. 14 microCMSを使う • コンテンツマネジメントシステム • ヘッドレスCMSなので、フロントエンドは自由 • APIスキーマという形でAPIをカスタムして作ることができる • APIを複数作ることができる • APIスキーマという形でデータの定義を自分でできる
15. © 2023 Ateam Inc. 15 ComponentをCMSで管理できるといいのでは?
16. © 2023 Ateam Inc. 16 APIスキーマをこのように定義
17. © 2023 Ateam Inc. 17 microCMS側で記事を作る
18. © 2023 Ateam Inc. 18 microCMS側で記事を作る
19. © 2023 Ateam Inc. 19 microCMSの出⼒ { "article": [ { "fieldId": "heading", "text": "Componentで管理をします ", "level": 2 }, { "fieldId": "text", "text": "Componentを先に作っておいて、それを CMSから指定する形にします \nComponentの指定と一緒にデータを渡すようにす ..." }, { "fieldId": "accordion", "title": "Componentで管理する方法 ", "accordion": [ { "fieldId": "accordion-item", "summary": "APIスキーマに各 Componentを定義する ", "details": "ひとつのセクションごとに APIスキーマを定義します。 \n Componentを定義して、一緒にデータを渡すようにしま ..." } ] } ] }
20. © 2023 Ateam Inc. 20 Next.jsの実装 Zodを使ってスキーマを定義する • Build時等にデータのミスを気づくことができる • 自由にバリデーションが追加できる • 型の世界に入れるのでコードが書きやすい
21. © 2023 Ateam Inc. 21 この形で実装するメリットは? • 細かい実装がしやすくなる • 型が書きやすいので安全かつ書きやすいコードになる • 記事作成の効率が上がる
22. © 2023 Ateam Inc. 22 この形で実装するメリットは? 細かい実装がしやすくなる • HTMLで属性の受け渡しが複雑だったが容易に属性を渡しやすくなる • Markdownでそもそも属性をつけられなかったが追加できる • Componentさえ作っておけば、なんでも配置ができる
23. © 2023 Ateam Inc. 23 この形で実装するメリットは? 型が書きやすいので安全かつ書きやすいコードになる • 記事を書いた後のビルド時や、プレビュー機能を使ったときに問題検知できる
24. © 2023 Ateam Inc. 24 この形で実装するメリットは? 記事作成の効率が上がる • リッチエディタで表現できない細かい要件のデザインを作ることができる • Componentを作っておけば再利用できるので効率があがる
25. © 2023 Ateam Inc. 25 デメリットは？ • 構造化されている分、管理画面が若干見にくい • 一括のコピペをすることができない
26. © 2023 Ateam Inc. 26 まとめ Next.jsとCMSを使ってComponentを管理するとやりやすかった • CMSから渡せるデータが増えるので細かなデザインに対応しやすい • 型を書いて進められるので記事作成の問題発見につながりやすい • コンテンツの再利用がしやすいので記事作成のスピードが上がる
27. © 2023 Ateam Inc. ぜひ、みなさんも microCMSを使ってみてください 27