ホームページをNext.js+microCMS+Vercelでリニューアルしました

会社のホームページを、Next.js+microCMS+Vercel を用いてリニューアルしてみました！

https://tocca.systems/

さほど機能があるページでも無いのですが、以下のようなポイントについて microCMS（ヘッドレス CMS）から更新できるようにしています。

• ニュースリリース
• エンジニアブログの一覧　※Zenn の記事への遷移を作らせていただきました！
• 会社概要の一部分

https://microcms.io/

microCMS で記事を更新すると、webhook で vercel に通知が飛んで、再ビルドが動いてページが更新されます。（大体１分くらいですね）

実装は簡単で、next.js で getStaticProps 処理内で microCMS の API を呼び出して記事を取得して、コンポーネントに対して一覧を渡して出力しています。（再ビルド時だけ microCMS の API を呼び出して、通常アクセス時は素早く Web サーバがレスポンスします）

microCMS さんの記事も参考にしながらで、１日くらいで十分実装できました！

microCMS 管理にしたところ以外は、以下のような形で直接更新ができるようにしました。

1. ローカル環境（Docker）で next.js の資材（ページやコンポーネント）を更新
2. GitHub に Push（main ブランチ）
3. Vercel で自動ビルドが実行されて、更新される。（約１分）

こちらも、ソースが読める人ならすごく簡単ですね。

今後、microCMS や Vercel を使った提案も強化していきたいと思いますので、よろしくお願いします！