LoginSignup
31
20

【Nextjs × microCMS × QiitaAPI】高校生が春休みに念願の個人ブログを開設

Posted at

はじめに

今回はNextjsとmicroCMSを使って個人ブログを簡単に作ってみたので紹介します!
個人的にブログを作りたい気持ちがめちゃくちゃあったので、もしそういう方がいたら参考になると幸いです!

紹介

こんな感じでかっこいいブログが完成しました!!

スクリーンショット 2024-03-31 164033.png

スクリーンショット 2024-03-31 164048.png

スクリーンショット 2024-03-31 164114.png

機能

  • 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を作ることでブログのコンテンツ管理を非常に簡単に行うことが可能です。
スクリーンショット 2024-03-31 164745.png

使い方はいたってシンプルです。

  1. プロジェクトを作る
       ↓
  2. APIを作る
       ↓
  3. 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
jisou-banner.png

✨About Me✨

友達になってくれよな(きらん)

  • X(Twitter)

31
20
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
31
20