概要

弊社ホームページとブログサイトをNuxt2からNuxt3にリニューアルしました。

以前の記事で、とある管理画面のアプリケーションをNuxt2からNextJSにリニューアルした時の感想を記事にしました。

NextJSを初めて導入移行、弊社が開発を受け持つWebクライアントアプリはNextJSベースのものを使うようになりました。
・・ただ、Nuxt3もかなりこなれてきた印象があったので、今回を機にNuxt2をベースとして作られていた弊社ホームページとブログサイトのリニューアルをしてみることにしました。

Nuxt2からNuxt3へリニューアルした時の「良かったなと思った点」や「不便だなと思った点」を整理したいと思います。

また、Nuxt3がかなり良かったので、Nuxt2に慣れている人は、あえてNextJSに乗り換える必要もないかなという気が改めてしました。・・ので、そのあたりの理由も整理したいと思います。

良かった点と悪かった点

Nuxt3で良かった点

1. Typescriptが簡単に使える
   1. npx nuxi init <project-name> で作られるプロジェクトがデフォルトでtypescriptをサポートしていました。
2. ホットリロードがめちゃくちゃ早い
   1. NextJSと遜色ないです。
3. （個人的な感覚になってしまって、表現しづらいのですが・・・）.vueページ・コンポーネントのコーディングがかなり描きやすくなりました。
   1. refやcomputedやuseStateなどをうまく駆使して、setup script内にデータ部分の処理を書いてから、<template />部分をコーディングすることで、以前感じていたコーディング時にhtml部分とデータ部分を行ったり来たりする感覚が減りました。
   2. データを処理するプログラム部分である、<script setup />箇所の記述が大幅にスッキリした感じがあります。以前は<script>内にdata/asyncFetch/computed/mounted/methodsなどプロパティを別々に宣言する必要があり、かなり冗長な感じがありました。
4. Nuxt2での開発経験があったので、ほとんど苦しむことなく開発ができた。（useState/refなどのhook系の部分だけ苦しみました。）

Nuxt3だと不便に思った点

逆にNuxt3だと不便だなと思った点が以下になります。

1. googleで検索して、Nuxt2の記事なのかNuxt3の記事なのかがわかりづらい。（これはめちゃくちゃ苦しみます。）
2. Nuxt2で使えた、moduleがNuxt3だと使えなかったりする。（これもめちゃくちゃ苦しみます。）（個人的な印象だと2~3割程度はNuxt3非対応のものがある感じでした。こちらは時間の問題で解決すると思われます。）

Nuxt2からNuxt3への移行方法に関して

今回移行してみて・・・

移行のやり方は、Nuxt3のまっさらなプロジェクトを作って、全て手動で移植するしかないなという印象です。

Nuxt2からNuxt3へはかなり書き方が代わり、かつ3rdパーティ製のmoduleもそのまま使えなかったりするので、移行スクリプトを書いて移行を自動化するのは非現実的かなと思いました。

ただ、基本的な概念に大きな変更がないため、移行自体はそこまで時間はかからないかなと思います。

NextJSとの比較

今回Nuxt3を使ってみて、かなり良かったので、以下のような明確な理由がなければあえてNextJSに乗り換えることもないかなと思われます。

理由としては、Nuxt2で最もデメリットに感じていた点（Typescript非対応/ホットリロードが遅い/冗長な記述）がNuxt3で大幅に改善されたからです。

NextJSに乗り換えた方が良い場合

• Mantine UIなどの、ReactがベースになっているUIフレームワークを活用したい
• reactと親和性の高いライブラリの利用が必須の場合

また、web界隈はNuxtよりもNextJSの開発の方がより先進的なように見えるので、NuxtとNextがどちらも初で、どちらかの採用を迷っているチームがいれば、NextJSをお勧めしようと思います。
Nuxt2を使っているチームはNuxt3をお勧めします。敢えてNextJSへのりかえる様なことはしなくて良いかなと思いました。

弊社ホームページとブログサイトのご案内

Nuxt3ベースのものに移行した、弊社ホームページとブログサイトはオープンソースとして公開することとしました。

Nuxt3の利用をご検討中の方や現在開発中の方は是非ご覧ください。

• 会社ホームページのGithubリポジトリ
• ブログサイトのGithubリポジトリ

以上です。