個人サイトを書き直した で、このサイトでは Nuxt v3 を使っていると書きました。
が、訳あって Next.js に移行したのでメモしておきます。
なぜ移行したのか
謎の挙動が多い
個人的に Nuxt 3 は高速かつ拡張性が高く、すばらしいフレームワークだと思っているんですが、開発しているとよく謎の挙動をします。
他のページから遷移した時はページが表示されるが、直接そのページにアクセスすると真っ白になる、とか
エラーハンドリングも書いていてローカルだと想定した挙動をするが、いざデプロイしてみるとエラーがキャッチされずにページが真っ白になる、とか。。。
何をしても解決せず、調べても対処法が載っていない…。辛かったです。
Next.jsを (React も含めて) 勉強したかった
今のトレンドが Nuxt より Next.js で、Next.js が使えないのはまずいな、と感じていたことと、
今後 Next.js を使うことが増えそうなので、使用感とか書き方とかに慣れておきたいなーと思っていたからです。
Nuxt に思うこと
(後から見ると Nuxt というより Vue.js に対して思うことになってしまった)
先日 Nuxt v3 がリリースされたわけですが、このとき script の書き方がガラッと変わりました。
v2 までの書き方が Options API、v3 からの書き方は Composition API といいます。
書き方が「変わった」ではなく「追加された」だけだ、と主張する人がたまにいますが、
今後 Composition API のみ対応な機能が追加されていく予定があるのに、それは本当に「追加された」だけなのでしょうか。
私に言わせれば、互換性のために Options API が残されているだけとしか思えません。Vue.js v4 とかでサポートされなくなってもおかしくはないと思いますし、今後も使っていこうという気にはなれません。
特に Composition API のデメリットだと感じるのが ref() です。
Options API 時代は、以下のような形で超簡単に、しかも何も意識せずに ref を使えていました。
export default {
data() {
return {
message: "Hello, Vue!",
count: 10,
}
}
}これが Composition API になると、こうです
const message = ref("Hello, Vue!")
const count = ref(10)これを初めて見たとき、「あれ？これ、React でよくね？」って思いました。
Vue 独自の Options API が好きで、あの記法が好きで Vue.js を使っていたのに、これだともう Vue.js を使う意味がなくなってしまいました…。
と、こんなわけで私は Next.js (React) を使うことにしました。
まとめ
ということで、Nuxt から Next.js に移行した理由をつらつら書いてきました。
これからも Nuxt はたまーに触る、ぐらいの距離感でいこうと思っています。
Next.js にはない module とか便利だし。
コメント