Next.js × microCMS × Vercel Nowで動画のまとめサイトを作った話
公開日 2020/05/06
動画のまとめサイトを作りましたので是非観てみてください！
Embedded content: https://movie.ebifry.jp/
フロントはReactベースのフレームワークであるNext.jsを採用、ヘッドレスCMSはmicroCMSを採用、ホスティングはVercel Nowで行いました。
躓いたポイントや参考にさせていただいたブログなどをまとめてみようと思います。
Next.jsについて
Reactのお勉強がしたい+更新頻度が高くないのでSSG（静的サイトジェネレート）したかったのでGatsbyを使おうかと思ったのですが、Next.jsでもSSGできるらしいという情報を掴んだのでNext.jsを使うことにしました。
Next.jsについては公式でチュートリアルがあるので、こちらをひと通りやってみました。
Embedded content: https://nextjs.org/
SSGに関してはgetStaticPropsとgetStaticPathsというAPIを使う必要があるのでこちらの記事を参考にしました。
Next.js 9.3新API getStaticProps と getStaticPaths と getServerSideProps の概要解説 - Qiita
Next.jsでは特に難しいことはしておらず、CMSから貰ったデータを表示しているだけなのでスムーズに実装出来ました！
SSGで躓いたポイントとして、元々API Routesを利用してデータの管理をしようと思っていました。ただAPI Routesを使うとSSGが出来なくなる？みたいでAPI RoutesとSSGを両立することが出来ませんでした。
（API RoutesでもSSG出来るという情報を知っている方がいれば教えてください！）
そのためヘッドレスCMSを使うことにしました。
microCMSとは
日本製のヘッドレスCMSです。Twitterで度々話題に上がっているので使ってみました。
Embedded content: https://amazing-raman-feb578.netlify.app/
普段使っているContentfulというヘッドレスCMSに比べると機能面は劣りますが、使いやすさで言うとmicroCMSの方が使いやすいと思います。
ヘッドレスCMSとは何かという説明からしてくれるので、はじめてヘッドレスCMSを使うという方はこのmicroCMSから入ると良いと思いました！
何気なく呟いた僕のツイートを拾って、すぐさま対応してくれるというユーザーサポートが手厚さも魅力だと思います！推せる！
Embedded content: https://twitter.com/micro_cms/status/1246195712590659584
無料プランと有料プランがありますが、個人ブログくらいの規模感だと無料プランで充分です。
業務案件やチームで管理する場合は有料プランを考えるくらいで良いと思います。
Vercel Nowとは
PaaS（Platform as a Service）と呼ばれるものらしいです。
Embedded content: https://zeit.co/
Next.jsのチュートリアルでオススメされたので使っているのですが、Next.jsで作ったものを良い感じにホスティングしてくれてます！何こいつ！よく分かってないけど！
Netlifyだとビルドコマンドの指示やdistディレクトリの指定が必要でしたが、Nowはこの設定すら不要です。
Embedded content: https://nextjs.org/docs/deployment
躓いたポイントとしては、Vercel Nowで環境変数を使う時にはNowコマンドというものを使って設定する必要があります。Netlifyはサイトから環境変数を設定していたので、混乱しましたが以下の記事を参考にしました。
まとめ
今回はReact（Next.js）、microCMS、Vercel Now全て初めて使いサイトの公開まで行いましたがサービス側がどんどん親切になっているのでJAMstackの知識がふんわりあれば簡単なサイトはすぐに出来てしまいました。
フロントエンドは習得技術の幅が広がり過ぎてカオスと化してますが、楽できるところも多いので楽できるところは甘えて生きていきましょう！
