こんにちは！明けましておめでとうございます。Mizutani(@sirycity)です。2021年の目標は継続です。ブログは継続できてないけどな。

今日はこのブログ「JSに関するお知らせ」をGatsby.jsからNext.jsに移行した際のいろいろを書きます！なお移行したのは2021年1月21日です。

はじめに

このブログは2019年3月から続いていますが僕が飽き性なので3回フレームワークを変更しています。

• 最初: Nuxt.js
• 2019年9月: Hugoに変更 記事
• 2020年8月: Gatsby.jsに変更 記事

たいてい変える時は不満な所があって、変えた結果また別の所が気になってs…って感じなので 今回もその辺りを書きます。…正直Gatsbyにはそんな不満はないけどね！それ言うとブログのネタになんないからね！

Gatsby.jsで気になってたところ

ブラックボックス部分が多い

最大の理由。Gatsbyってめっちゃ丁寧で、ちょちょいとプラグイン入れてマークダウン置けば勝手にそれっぽいのができます。すごい便利。便利なんだけど、それ故に中で何やってるか分かんないって不安があります。これはGatsbyがそういうフレームワークってのもあるけどね。シンプル極めてるNextとはちょっと違う思想です。

何やってるか分かんないと、ちょっとした小回りが効かなかったりするんですよね。例えばブログの外部リンクを別窓で開きたいって思ってたんだけどGatsbyだと全然やり方分かんなかった。gatsby-transformer-remarkってプラグインがあって、これ入れて終わりだからね。便利なんだけどね。

他にも便利なプラグインが多すぎるが故に…って場面が結構ありました。

画像最適化の出番がない

Gatsbyの大きな長所の1つに画像最適化があります…が、技術ブログではあんまり出番なし。もっとこう画像コンテンツの多いブログだったら良かったんだけどね！

ビルドが遅い

前使ってたHugoが早すぎるってのもあったんだけどビルドが激遅でした。そこそこストレスだった。

Nextにちょっと押され気味

GatsbyがNextに若干押され気味です。

npm trendsの比較

と言っても別にGatsbyが廃れてるわけじゃないけどね。流行り物に振り回されるのはフロントエンドエンジニアの宿命ですね。 余談ですが、Nextが急上昇した要因は動的ページのサポートかな？と思います。

Next.jsで良くなったところ

ブラックボックス部分が少なくなった

これが一番。Nextにした結果Gatsbyがよしなにやってくれた部分を全部自分で作ることになって、結果としてすごい勉強になったし細かい挙動を調整できるようになりました。

例えばmarkdownの変換部分ではgray-matterってライブラリを使ってるってのがよく分かったし、変換の処理とかも細かくいじれるから↑で書いた外部リンク別窓の他にも<a>にnoreferrer付けたりとか<img>を遅延にしたりだとか色々できた。

ビルドが早くなった

そんな変わらんけど、20秒くらい早くなりました。Nextの方が多機能なのにビルド早いのは不思議ですね。GraphQLが重いのかな。

コード量が減った

コード量が減りました。これは意外！Nextの方が自分で書くのが増えるからコード増えるかと思ったら減った。Gatsbyでconfigとかnodeをゴリゴリ書いてた部分がなくなったのと、GraphQLが消えたのが大きいかなーと思います。

余談ですが、今回の移行を通してGraphQLってそんなに良くなくない？ と思いつつあります。すごいポテンシャルはあるんだろうけど、ブログみたいな 小規模なプロダクトではオーバースペックになって、タイプ量が多い欠点が際立つ気がします。

Next.jsで良くならなかったところ

AMPにできない

これはちょっと気になる。NextにはAMPモードもあるんですが、いざやってみるとエラー頻発。各種ライブラリの対応が追いついていないのが現状のようです。今回もAMPは諦めました。

時間が超かかった

Nextへの移行を始めたのが去年8月。丸々4ヶ月移行にかかりました。やっぱ自分で考えて作る部分は多いよね。そのぶん勉強になったからOKかな？

UXはほぼ変わらず

Nextにした所でユーザー体験はほぼ変わらず。というか全く変わらず。移行したことすら気づかないくらいの変化しかありませんでした。

さいごに

色々あったGatsby→Nextへの移行ですが、やって良かったなー！って。特にmarkdown変換部分の知識がめっちゃ付きました。 個人的にWebアプリはNext、WebサイトはGatsbyっていう棲み分けをしてたんですが、これだけNextで作れるようになったならNextに一本化しても良いかなと思いつつあります。

残りの不満はAMPにできないことくらいですが、これはもうしょうがないかな？実はEleventyとかに移行しようかなーとも考えていたんですが資料が少なすぎて断念しました。いつかWASMとかで静的ブログが作れたら面白そうですね。それでは。