ReactとNext.js、どっちを選べば正解？【ビギナー向け】

ReactとNext.js

Reactアプリを作るとき、開発ツールには次の2つの選択肢があります。

【1】React + Vite

【2】Next.js

これら開発ツールの特徴と、選び方を紹介します。

【React + Vite】について

もしReactをもっともシンプルな形で、余計な追加機能なく使いたい場合は「React + Vite」を選びましょう。

Reactだけにフォーカスして学びたい初心者も、こちらを選んでください。

ここで多くのビギナーが疑問に思うのは、なぜ「+ Vite」と記載されるのかということです。

少し説明をします。

Reactはいくつものテクノロジーが複雑に組み合わせて作られています。

そのため、開発を始めるための環境整備・セットアップ作業に時間がかかっていました。

そこで、Reactをすばやく始めるための「スターターキット」が作られます。

「create-react-app」というものです。

この「create-react-app」は、Reactだけをシンプルに使いたいケースで非常によく使われました。

しかし、内部で使用されているWebpackというツールが、開発効率を下げるデメリットも顕在化してきます。

そのため2022年ごろからは、WebpackをViteに変え、さらに開発効率を上げる様々なチューニングを施した「React + Vite」が広く使われ始めたのです。

次はNext.jsを見てみましょう。

【Next.js】について

Next.jsは「Reactフレームワーク」と呼ばれます。

しかしここで、「React自体がJavaScriptのフレームワークなのに、その上にさらにフレームワークがあるのはなぜ？」と多くの人は疑問に思うでしょう。

実はReact自体が提供している機能は最小限で、開発スピードを上げたり、ページ設定をしたり、アプリを公開した後にSEO対策を施したりするには、様々な追加作業が必要になります。

これらは多くのアプリで共通する定型化できる作業なので、最初からそれらすべてをReactに追加した「オールインワン」のReactスターターキットがあれば便利です。

それがNext.jsです。

【まとめ】React + ViteとNext.js、どっちを選ぶ？

必要な機能がデフォルトですべて入ったNext.jsは便利です。

しかしすべてのReactアプリに、Next.jsの提供する多種多様な機能が必要かというと、そういうわけではありません。

Next.jsには「最低限の機能」ではなく、場合によっては「機能過多」とも言えるような機能も入っているからです。

これは学習コストの高さや、チーム開発における個々のスキル差といったことにもつながります。

一方でReact + Viteは、ミニマムで開発を始められ、徐々に必要な機能だけを追加できます。

その一方、React + Viteで作るReactアプリはSPAと呼ばれるもので、これはSEO（＝検索ランキング最適化）に弱いという問題があります（SPAについてはこの記事を参照）

しかしSEOを考慮しなくていいアプリも数多くあります。

例えば社内向けの管理アプリや、データ操作ツールといったものは、一般向けのアプリではなく、クローズドな環境で動けばいいものです。

そのため、このようなアプリ開発時にはReact + Viteでも十分でしょう。

一方で、一般向けの大規模アプリでは、パフォーマンスやセキュリティ、そしてSEOといったことが重要になるため、Next.jsの利用がより現実的な選択肢となるでしょう。

アプリケーションの規模、SEOの重要性、リソース（時間・開発チームのスキルレベル等）といったことが、どのReact開発ツールを使うかを決める上での大きなファクターとなります。

▼【無料フロントエンド・ガイド】は下記ページで受け取れます。

https://monotein.com/present-for-readers