ReactフレームワークのNext.jsと、VueフレームワークのNuxt.jsで、それぞれ静的サイトを構築してみて感じた違いなどをご紹介します。

用いるデータはWordPressのデータで、どちらもWPGraphQLを使って取得しています。

比較対象のサイトは以下の通りです。

◆ Nuxt.js:https://shinobiworks.com/

◆ Next.js:https://straylancer.com/

【結論】どちらか1つ選ぶならNext.js

  • 開発サーバーの立ち上がりが早い
  • 余計な設定が不要で開発に集中できる
  • 覚えるルールが少ない

など、全体的にNext.jsの方が扱いやすいです。詳細は以下に続きます。

開発環境の違い

Next.jsはZero Config(ゼロコンフィグ)を謳っていて、文字通り「設定が不要」です。もちろん、拡張することもできます。

私が行った拡張はたった1つ。イメージのドメイン設定だけです。

// next.config.js

module.exports = {
  images: {
    domains: [process.env.DOMAIN, "0.gravatar.com", "secure.gravatar.com"],
  },
};

※この設定はコンポーネント側で直接指定もできるので、その場合は本当にゼロコンフィグになります。

一方、Nuxt.jsは、コンポーネントの自動インポート機能が登場したり、以前よりも格段に扱いやすくはなりましたが、まだまだ細かい設定が必要で、ヨーイドン!での開発スピードはNext.jsに劣ります。

また、開発サーバーの立ち上がりや、ホットリロード(自動更新)も、Next.jsの方が速いです。

TypeScriptとの相性

両者の決定的な差と言えるのがTypeScriptとの相性です。

ReactとVueの違いにも言えることですが、Nuxt.jsとTypeScriptはとにかく相性が悪いです。導入に手間がかかる上、Vuexは別設定が必要だったり、JSXで開発した後は特にストレスフルです。

TypeScriptでの開発を考えるなら、Next.js一択と言ってもいいです。

覚えやすさ

これまたReactとVueの違いとも言えるのですが、Next.jsの方が覚えることが少なく扱いやすいです。それぞれの特殊な記法とは別の話で、Nuxt.jsで言うところのライフサイクルが良い例です。

Next.jsは、開発時も静的ファイル生成時も、getStaticProps(データ操作)とgetStaticPaths(パス操作)の2つだけ覚えていればOKです。

一方、Nuxt.jsの場合、開発時のサーバー側の操作はfetchやasyncDataで、クライアント側の操作はmoutedで、そして、静的ファイル生成時はPayloadを使って…と、独自のルールがいくつもあり、細かいことができるのは確かなのですが、その分覚えることが多く疲れます。

覚えることが多いということは、ブランクが発生した場合に変化をキャッチアップする時間も余計にかかることなので、シンプルに扱えることに越したことはないと思います。

汎用性

フレームワークだけでなく言語にも通じる話ですが、技術やツールを選ぶ上で「汎用性」の観点は重要です。つまり、どちらを身につけた方が、より仕事に活かせるかです。

これに関しては、ReactとVueの話でもあるので、両者を含めたテーマにはなりますが、世界的にも、日本国内だけ見ても、Reactの方が仕事(求人)は多いため、Next.jsの扱いに慣れていた方が汎用性は高いと言えます。

また、WordPressのブロックエディターがReactを採用しているのも大きなポイントだと思っていて、WordPress系のスキルがメインの場合は、React(Next.js)を強く推します。

ただ、需要と供給のバランスはいつどうなるか分からないので、余裕があればVue(Nuxt.js)にも慣れておくのがベストです。(正直、慣れれば両者の違いはさほど気になりません)