2023-01-15

microCMS+Next.js+VercelでJamstackなポートフォリオを作った

ポートフォリオ&ブログサイトを作りました。
技術はmicroCMS、Next.js、Vercelを使っています。


ポートフォリオサイト
https://microcms-next-portfolio-ebon.vercel.app/

とりあえず公開する為の必要最低限の実装ができたので、デザインは一旦置いておきコンテンツを作っていきます。
記事を更新したいときはmicroCMSで書いて公開すれば自動的にvercelでビルドされて静的なページがデプロイされる仕組み。
デザインを変更したいときはGithubにpushすればOK。
デザインとコンテンツを分離できるので、飽きたら簡単にデザイン変更できます。
これでスマホでもPCでもブラウザがあればWebを更新できるのでめっちゃ楽になった。
以前、Nuxt.jsとnuxt contentを使ってブログを作ったのですが、更新が面倒で続かなかったです。

楽なのは正義。本当はTwitterが正義。

Jamstackは仕事でもどんどん使っていきたい。
ヘッドレスCMS+Next.jsでJamstack構成のメディアサイトをたくさん作りたい。

cssはTailwindCSSを使ってみた。
TailwindCSS

時間の表示についてはdayjsを使用。
作成日(createdAt)や公開日(publishedAt)がAPI経由で取得すると1日ズレてしまいます。

ページネーションについてもこちらの記事を参考に実装しました。
Next.js(SSG)でページネーションを実装してみよう | microCMSブログ

microCMSの参考記事
microCMS + Next.jsでJamstackブログを作ってみよう | microCMSブログ
Next.jsでカテゴリー機能を実装してみよう | microCMSブログ