はじめに
今回はNextjsとmicroCMSを使って個人ブログを簡単に作ってみたので紹介します！
個人的にブログを作りたい気持ちがめちゃくちゃあったので、もしそういう方がいたら参考になると幸いです！
紹介
こんな感じでかっこいいブログが完成しました！！
機能
- microCMSからブログ記事を取得して表示する
- Qiitaの記事を表示
- ブログ記事の場合は詳細ページを表示、Qiita記事の場合はそのリンクへ飛ぶことができる
使用技術一覧
- Next.js
- microCMS
- Qiita API
- tailwindcss
- daisyUI
- firebase(ホスティング先)
- jest
- react-testing-library
- github actions(CI/CD)
技術紹介
今回の開発で初めて触れた技術について紹介したいと思います
microCMS
microCMSとは？？
microCMSはAPIベースの日本製ヘッドレスCMSです。
快適な管理画面により、開発・運用コストを大きく削減することで、ビジネスを加速させます。公式サイトより引用
僕の言葉でご説明させていただくと、ブログのコンテンツを管理できるシステムです。
こちら少し見にくいかもしれませんが(クリックすると大きく見れるはずです)、自分でAPIを作ることでブログのコンテンツ管理を非常に簡単に行うことが可能です。
使い方はいたってシンプルです。
- プロジェクトを作る
↓ - APIを作る
↓ - microCMS公式のsdkを利用してデータを取得する
少し情報は古いような気がしていますが、こちらとても参考になりました。
daisyUI
daisyUIはtailwindcssをベースに作られたUIライブラリです。
僕の作ったブログのような画面がとてつもなく簡単にできてしまいます。UI構築を煩わしく感じている人にはうってつけです！作っていてすごく楽しいライブラリです。ぜひとも体験してほしいです！
QiitaAPi
正直ドキュメントを見ても使い方がわかりにくかったです。なのでchatgptなどを駆使して使ってみました。
僕はこのような感じで取得しました。headersに認証情報を書けばよいみたいです。
const res = await fetch(
//?per_page= というクエリをつけると取得記事数を制限できる
`https://qiita.com/api/v2/users/ユーザーID/items?`,
{
method: "GET",
headers: {
Authorization: `Bearer ${process.env.QIITA_API_TOKEN}`,
"Content-Type": "application/json",
},
//これでSSRでデータ取得が可能
cache: "no-store",
}
);
躓いたところ
- apiを作るのか関数を作るのか
nextjsでは簡単にAPIを作ることも可能ですが、apiを叩くとjson形式で返すようにしており、.json()をいちいちする必要があるなどの理由から正直恩恵を感じることが出来ませんでした。
qiitaAPIからデータ取得する際に取得記事数の制限をかけられるようにapiを作ったのが原因かもしれません。apiがあるのにその中間にapiを作るとはどういうこっちゃ！と自分は思ってしまいました。
- microCMSのクライアント作成
詳しくはこちらをご覧ください
- レンダリング方法
最初のうちはCSRを使ってしまっていて、やたらと処理が遅くなるということがありました。まだ使い方も慣れていなかったので今後どしどし使っていこうと思います。
終わりに
daisyUIのおかげもあってUIはサクサク完成していくし、microCMSも割と使いやすかったので開発していてすごく楽しかったです！みなさんもぜひ個人ブログを作ってみてください！！
理想の個人ブログ開発はつづく、、、、
次回「SEOを意識したJamstack構成のブログを作ってみた」
お楽しみに～～😊
🔥JISOUのメンバー募集中🔥
プログラミングコーチングJISOUではメンバーを募集しています。
気になる方はぜひHPからライン登録お願いします！
https://projisou.jp
✨About Me✨
友達になってくれよな(きらん)
- X(Twitter)