[Next.js × microCMS] JamStackなブログを設立しました
2022-03-29
Hello World!!
皆様初めまして、kitamago と申します。
今年度からフロントエンドエンジニアとしてデビューしたひよっ子です。
詳しいプロフィールに関しては近日投稿予定です。
就職活動中にもポートフォリオサイトを Gatsby.js で作っていましたが、
「実務を通して技術情報をアウトプットとして発信したい!」と思い立ったので
勉強がてらにブログを作ってみました。
ブログ構成図 ( 技術構成 )
本ブログの構成図 (概略) は下図のようになっています。
また、要件定義としては以下の通りになります。
• サイトマップ
• 記事一覧取得
• カテゴリ別記事の取得
• 最新の記事取得
• 詳細記事の取得
• 関連記事の取得 (投稿済み記事ページのリンクをリッチに埋め込む)
• 人気記事の取得
• 目次
• ページ内検索
• PWA (追加実施予定)
• プレビュー機能 (追加実施予定)
MicroCMS APIスキーマ設定
ブログ
endpoint: blog
type: リスト形式
フィールドID | 表示名 | 種類 | 必須 |
---|---|---|---|
title | タイトル | テキストフィールド | true |
contents | ブログ本文 | 繰り返し | true |
image | OGP画像 | 画像 | true |
tags | タグ | 複数コンテンツ参照 | true |
description | 概要 | テキストフィールド | |
toc_visible | 目次 | 真偽値 |
タグ
endpoint: tag
type: リスト形式
フィールドID | 表示名 | 種類 | 必須 |
---|---|---|---|
tag | タグ | テキストフィールド | true |
人気記事
endpoint: popular
type: オブジェクト形式
フィールドID | 表示名 | 種類 | 必須 |
---|---|---|---|
articles | 人気記事 | 複数コンテンツ参照 | false |
今後の展望
実務を通して学んだこと、躓いた等を不定期ながら更新できたらと思います。
ではでは。