2021-02-23

Hello world

Next.js + Contentful + NetlifyでJamstackブログを作った話

post image

Reactを書きたくてとりあえずブログを作ったので作るまでの過程をもろもろ書いていきます。

背景

React書きたい! Jamstackやってみたい! から初めて正直何も決まってなく、とりあえずReactで書き始めた。 会社で担当しているプロダクトのフロントの改善に持っていく知識を身につけるためでもある。

技術選定(初期)

- フロント: React
- デザイン: MaterialUI
- CMS: MicroCMS
- デプロイ: 決めてない

Reactを書きたかったのでReactでとりあえず書き始めた。 デザインに関してはCSSザコなのでMaterialUIにしていた。 CMSは流行りのMicroCMSを検討していて、デプロイ先は特に決めずにスタート。 Topページを完成する部分まではこの構成でしていた。

デザイン変更

MaterialUIから少しモヤモヤ感を感じ、emotionに移行した。 詳しい話は別のポストに書きます。

スタイル移行した話

nextJSに移行(現行)

- フロント: nextJS
- デザイン: emotion
- CMS: Contentful
- デプロイ: netlify

記事のページを作り終わって、そろそろデプロイして公開することを目指していた。 Jamstackをやったことがなく、Reactで何とかプラグイン入れれば良いでしょー的な考え方だったが、難しかったので少し変えようと思ってまた技術選定をした。

最初検討していたのは React Static だった React Static Githubの星も1万個近くあって、良い!と思って導入。 動かすところまでもでき、ちゃんとstaticなページのビルドまでもできたが、ちょっと書き方が難しかった。 static buildのためにAPIコールする部分とかがもうちょっと簡単に書きたかったのでまた他を参考。

そこで最終的にnextJSに落ち着いた。 pageの切り方、staticPropsの渡し方が凄くわかりやすく、気に入った。 React + α的な書き方だったので移行も簡単だった。

CMSやnetlifyの詳しい話は別にします。