Next.js + Vercel + GraphCMSでブログを作っている

NextとVercelの組み合わせがサイコー

2020-08-20

タイトルの通りだけど、Next.js + Vercel + GraphCMSでブログを作っている。
umeg.blog
リポジトリ

Next.jsを使ってみた感想

Next.js v9.3あたりから色々といい感じの機能が追加されたと聞いて触ってみたかった。
SSGをやってみて、サーバー側というかNodeでデータ取得してからフロントへjsの処理が移っていく感触が分かって良かった。
開発体験が結構よかったので今後もNext.jsを使って遊んでみたいと思う。

Vercelの感想

とにかくデプロイがめちゃ簡単。VercelのGithubプラグインがすごく優秀。
GithubにPRを作ったらそのブランチに合わせてプレビュー用のURLを作ってくれる。そこで確認して問題なかったらmasterへマージ。masterにマージされたものが本番環境のようにデプロイされる。
これもNext.jsと合わせて使い続けると思う。

GraphCMSについて

GraphCMSを使ったのはgraphqlの勉強のためだったんだけど、当初望んでいた結果にはならなかった。
というのもApollo ClientやRelayをフロント側で使うときの勉強をしたかったわけだが、Next.jsでSSGするのでデータ取得はサーバー側で完結してしまう。現状はフロント側でデータの再取得をするような機能もないのでApollo Clientなどは入れず、fetchをラップした関数とgraphql-code-generatorという素朴な組み合わせでやっている。
(実はRelayを入れていたこともあったが、fragmentを使い始めたらコンポーネントのテストがしづらくなったり、自動生成された型定義のコードでビルドエラーが出てしまったりして辛くなってきたのではがしてしまった)

とはいえHeadless CMSってこんな感じかーというのが分かったのは良かった。
Next.jsとHeadless CMSがあれば作りたいものが割とサクッと作れそう。いつぞやのRailsみたいだなと思った。

さいごに

Next.jsとVercelの組み合わせがとにかく最高だった。
ブログづくりに関しては機能が足りていなかったりまだ微妙な部分が残っているけど、ちょっと飽きてきたのでいったん終わりにする。
このあとは技術的な話や日常的な話を書いていきたい。