🌊

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

2022/09/16に公開約700字

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

https://tocca.systems/

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

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

https://microcms.io/

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

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

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

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

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

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

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

Discussion

ログインするとコメントできます