MARDEV

Next.jsでブログを作成しました！

Next.jsとmicroCMSでブログを作成しました！

23 April, 20244 May, 2024

作成したブログについて

アウトプットの場としてオリジナルブログを作成したいな～と思っていたので、気になっていたNext.js14でブログを作成しました。

■サイトURL

https://mardev-rho.vercel.app/

■Github

https://github.com/mardev-K/next-microcms-blog/tree/main

開発方針

  • シンプルかつ動作の軽いブログを作成する
  • コンテンツはヘッドレスCMSを使用して管理する

参考

ブログ自体を作成したことがなかったため、

みんなどのようなブログを作成しているのかとGithubを漁っていたら下記のテンプレートを発見しました。

今回はこちらのテンプレートを参考にさせていただいて、カスタムしていこうと思います。

他にも、すてきなブログを作成していてとても参考になった方たちを(勝手に)紹介させていただきます。

Shin_Codeさん

Somahcさん

Sendoさん

MicroCMS × Next.js14でブログサイトを作る


大変参考にさせていただきました！
ありがとうございます。

実装機能

  • MicroCMSで投稿したブログの一覧表示
  • MicroCMSで投稿したブログの詳細表示
  • ページネーション
  • ブログ記事のタグ機能
  • ブログ記事の検索機能
  • aboutページ
  • Google Analytics

技術スタック

  • next.js : 14.1.0
  • react : 18.2.0
  • microcms-js-sdk : 3.1.0
  • TypeScript : 5.4.5
  • node.js : 21.7.2
  • eslint : 8.57.0

CSSはTailwindCSSを使おうと思っていたのですが、CSSにしばらく触れていないな～と思い、復習のためにCSS Modulesを使用することにしました。

CMS

今回は、情報がたくさん転がっていた「microCMS」を使用しました。

無料の枠だと作成できるAPIキーは 3個 が上限ですが、今のところ小規模のブログなら問題ないかと思います。

ロゴ

ロゴはこちらを使用させていただきました。

https://devicon.dev/

https://react-icons.github.io/react-icons/

https://iconbox.fun/

https://www.canva.com/

アイコン

アイコンはこちらで作成させていただきました。

https://myedit.online/jp/photo-editor

デプロイ

今回は「Vercel」をデプロイ先としました。

無料枠だと個人的かつ非営利な目的でのみの利用に限られてしまうみたいです。

今のところは商用利用は考えていないのでOKとしました。

今後の修正点

1. OGP画像の生成

SNSでシェアもしていきたいので、OGP画像の生成できるようにしたいです。

2. リアルタイム検索機能

現在検索機能はテンプレートの内容をそのまま使っていますが、リアルタイム検索機能にしたいなと思っています。

Enter押さないと検索結果が表示されないのは何かと不便。。。

3. トップページの修正

ヘッダーの下に検索バーとタグ一覧を表示していますが、これは別ページに移動しようと思います。

ヘッダーのナビから検索ページに遷移するようにします。

4. ブログ背景の修正

はじめはダークモードを実装しようと思ってましたが、個人的にライトモード必要かな・・・？と思っています。

そのため現在は背景を黒の単色にしていますが、少し寂しいのでアニメーションやグラデーションを使用してすこしワイワイしようと思っています。

5. Projectページの追加

作成したWEBサイトやアプリケーションの紹介ページを作成したいと思っています。

ポートフォリオとして使用もできるので、ぜひ追加したいところ。

6. MicroCMSのカスタムクラスの使用

MicroCMSではリッチエディタでカスタムクラスなるものを使用できるみたいです。

これで文字色だったりハイライトは設定してね。とのこと。

より分かりやすく楽しいブログ記事を投稿していきたいのでこれは実装したいです。

7. 人気記事の表示

投稿記事が増えてきたら、人気記事を表示できるようにしたいです。

Google Analyticsを使用すればできるみたいなので、気が向いたらそのうち実装します。

まとめ

まだまだ修正点はありますが、

業務以外で初めて作成物をシェアできたことにワクワクしています。

今後は、まず作成したブログの解説をしていけたらいいな～と思っています。

現在フィリピンに移住しているため、テック系だけでなくフィリピンの日常も発信できたらと思います。

質問やフィードバックがありましたら、お気軽にご連絡していただけると嬉しいです。