Next.jsとは？ Next.jsのメリットについて | Reactとは違う？フロントエンド入門
今回の記事では、Next.jsを初めて知った人に向けて、Next.jsとは何か、どこが優れているのか、Reactとはまた別なのか、誰が開発したのか。
などなど… etc 網羅的に解説をしていきます。入門者向けのガイダンスなので、技術的な細かい説明は省き、ざっくりと概要をまとめたいと思っています。
この記事を読むことで、Next.jsについて理解が出来ると思いますので、ぜひ参考にしてみてください。
Next.jsとは？
Next.jsとは、簡単に言うと、Reactをベースに作られたWebフレームワークです。
Next.jsを使うことで、Reactを使ったウェブ開発が、より便利に出来るようになります。
Webフレームワークで最も有名なものと言えば、Rubyをベースに作られたRuby on Railsというものがありますが、それに近いです。Next.jsを使えば、Next.jsだけでWebサービスの全てを作れるので、とても便利ですよね。
Next.jsは誰が作っているの？
Next.jsは、Vercelという米国の企業が開発しており、完全にオープンソースなライブラリとしてGitHubに公開されています。
Vercelは、企業としてNext.jsをデプロイ&運用出来るホスティングサービスも同時に提供していて、
フロントエンド開発プラットフォームとして1億200万ドルのシリーズC調達を完了してるので、資金力もありとても信頼できます。
Next.jsが注目されている理由
Next.jsを使うべき理由として最も挙げられるのは、豊富なレンダリング技術です。
元々、ReactというのはSPA(シングルページアプリケーション)なので、リッチなUIを実現できる代わりに、
- サイトの初期表示が遅い
- SEOにめっぽう弱い
- 画面の描画に特化してるのでバックエンドを自力で開発しないといけない
などなど…etc 多くの欠点もありました。（レンダリング技術の違いについてはこちらの記事がおすすめ）
しかし、Next.jsはNode.js上に構築されているので、サーバーサイドレンダリングや静的ウェブサイトの生成などを簡単に実現できます。
つまり、Next.jsを使うことで、Reactベースのウェブアプリケーションの機能性を効果的に向上させることができます。
Reactの公式ドキュメントでも、Next.jsを「Building a server-rendered website with Node.js」のソリューションとして開発者に勧めているほどです。
その結果、Next.jsを使うことで、下記のような強力なメリットが生まれます。
- サイトの初期表示が早い
- SEOにめっぽう強い
- Node.jsなどサーバーJSも使える
Next.jsを使うと簡単に本番環境へのデプロイが可能
Webサービスを開発するとき、意外と億劫なタスクとして上げられるのが、ローカル環境で開発したサービスを、本番サーバーにデプロイすることです。
Next.jsを開発してるVercelは、Next.jsに最適化したホスティングサービスを提供しているので、驚くほど簡単に、セキュアで堅牢にNext.jsアプリを運用できます。
しかも、個人利用ならサーバー代が無料です！！
Nuxt.jsとNext.jsの違いって？
余談ですが、Next.jsの話をしていると、必ずNuxt.jsとは何が違うの？と言われることがあります。
根本的に、Nuxt.jsはVue.jsで作られているため、全くの別物です。しかし、Nuxt.jsはNext.jsに触発されて影響を多大に受けているため、
殆ど同じようなことがNuxt.jsで実現できます。Reactを使うか、Vueを使うかは開発者やチームの好みですね。
Next.jsの弱点
ここまでで、Next.jsについてメリットを沢山書いてきましたが、敢えてデメリットのようなものを挙げるとすれば・・・
- Reactを覚えるのが難しい
- Node.jsも理解していないと使いこなせない
- 小さなプロダクトには不向きかもしれない
- SEOやSSRなど使わないなら不要かもしれない
くらいですかね。Next.jsは、ファイルベースのURL提供していて、例えば /pages/user/[id].tsx というファイル構造があった場合、URLは http://localhost:3000/users/YUaAZN みたいな感じでダイナミックルーティング実現されます。
ただし、/pages/api/user/[id].tsx というファイル構成では、apiフォルダの配下は強制的にNode.jsが動くという仕様になっているため、ウェブ開発初心者だと「？？？」みたいになることも多々あるかと思います。
Railsとかもそうですが、フレームワークの思想や、ルール見たいなものを吸収するために、多少のウェブ開発の技術を求められるのも、敷居が高く感じられる理由かもしれません。
ただし、総括すると、Next.jsはReactが実現できなかった多くの命題を、革命的に優れた技術で解決したフロントエンドの救世主くらいに思っているので、ぜひ使うべきだ〜と思います。
参考
りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています！