Nuxt.js => Next.js 移行、一人で一ヶ月で

リーディングリスト消化

150 万 MAU の Nuxt.js 製サービスを機能開発を止めずに 1 ヶ月&1 人で Next.js に置き換えた話

Nuxt.js => Next.js への移行記事だけど、一人で一ヶ月でやったのってヤバいのでは。

移行の理由としてまず現状のつらみがあり、

• 型がうまく効かない場合がある
• アーキテクチャが荒野
• 永続化されたグローバルステートがヤバい
• Nuxt を他のプロダクトで使ってない

という感じらしい。

型が効かないのはすごく分かる。そもそも props の指定方法がしっくりこなかったり、型定義での書き方が定まってなくてあれやこれやなったりする。

アーキテクチャに関しては、弊チームでも一部に何かが導入されていて他は別物なので混在しているというのがある。が、この記事ではコードベースの量や入っているアーキテクチャがすごいことになっていて、ディレクトリ構成を見ただけで目眩がする感じだったので凄まじかった。

state の永続化に関してはたぶんプロダクトの特性によるとは思うんだけど、全ての state を Vuex に集約してそれをすべて Local Storage にぶち込んでいたというだけで恐ろしさが伝わってくる。

あと他に Nuxt を使っているプロダクトが少ないというのも、社内での異動のしにくさに繋がるのがよく分かる。弊社でも Nuxt.js と Next.js の両方が使われていたりするので、まあ両方やっている人もいるけど、統一できるならしたいよな〜という感じもする。

Next.js の選択理由も理にかなっている感じがある。Nuxt を TSX で使うなら上述の社内技術的な意味で Next.js でいいし、そもそも TS との親和性も Next.js のほうが高い。移行もアーキテクチャ自体が荒野なことを考慮に入れているので技術選定からやり直すことに対しても問題がない。

それでいて SSR/SSG をするのであれば Next.js 一択な感じ。

Istio は名前を聞いたことがあるくらいでどんなものか全然知らなかったので漠然と記事を読んで超雑に理解した。

Istio 入門 その 1 -Istio とは?- - Qiita

↑ の記事だけでも意味を知らないワードがたくさん出てきたのでちょっと別の機会に調べたりする。

CSSModules の採用で Nuxt.js の CSS をほぼコピペできるのはシンプルにすごい。そして CSS そのものの負債とは別で考えて、CSS での負債は別でやると割り切る判断も正しい感じがする。

プロダクトチームとの調整で柔軟に対応してくれたと書いてあるけど、これを 1 ヶ月でやりきるのは本当にすごい……。

あとこの記事の最初に書いてあったように Nuxt.js と Next.js はかなり似ていて区別がつけにくいので Nuxt.js のほうを斜体で書くアイデアが思っている以上に見やすくてよかった。