【注目度No.1】Next.jsとは？レンダリングの特徴やReactとの違いなどを解説！
この記事では、最近注目されている人気フレームワークNext.jsについてその特徴や使用した感想などをまとめてみた。
2021年においてWebフロントエンド業界でもっともブレイクした、テクノロジーといえば「Next.js」と「Tailwind.css」だろう。
今回はNext.jsの概要をまとめるとともに実際に使用してみて、Next.jsが一過性のブームなのか、今後のWebアプリケーションの流れを決定づけるゲームチェンジャーなのか見極めてみたいと思う。
なお、著者はNext.jsを使用するのは今回が初めてだ。
Next.jsとは？
Next.js公式ページ:: nextjs.org
まずはNext.jsの概要とその歴史について軽くおさらいしておきたい。
Next.jsはReactをベースとしたJavaScriptのフレームワークで、サーバーサイドのレンダリングを始めとした様々な機能を備えている。
NetflixやGitHubといった有名企業で導入されておりそのクオリティは保証済みだ。
Next.jsは最近よく耳にするようになったフレームワークだが、最初にリリースされたのは2016年で既にバージョン13がリリースされている。（2022年1月現在）
なお、Next.jsはNode.js上で動作するため、使用するには事前にNode.jsがインストールされている必要がある。
Reactとの違い
まずはNext.jsとReactの違いについて確認しておきたい。
Next.jsはReactを含むいくつかのライブラリがセットとなったフレームワークであり、Next.jsはすべてのReact機能を備えている。
Reactには無くNext.jsのみが備える機能を挙げると以下のようになる。
- サーバーサイドレンダリング
- ページのプリレンダリング
- ルーティング機能
- データのLazy Load
- 高速なイメージの読み込み
Next.js vs Nuxt.js
Next.jsとよく似た名前を持つフレームワークにNuxt.jsがある。
Nuxt.jsはNext.jsにインスピレーションを得て開発されたVue.jsのためのフレームワーク。
サーバーサイドのレンダリングやプリレンダレングといったNext.jsの特徴的な部分が継承されている。
Next.jsの特徴
Next.jsの特徴について確認しよう。
Next.jsの最大の特徴はシングルページアプリケーション（以下SPA）の弱点であった、「最初の読み込みに時間が掛かる」「SEO（サーチエンジン最適化）に弱い」といった点を改善している点だ。
HTMLページを事前に生成するプリレンダリングをデフォルトでおこなうので、高速なパフォーマンスとSEO効果が期待できる。
Next.jsを導入する
では、Next.jsを実際に使用してみよう。
新しいNextプロジェクトの作成
まずは新しいNextプロジェクトを作成する。
*Next.jsを使用するにはNode.jsがインストールされている必要がある。
npx create-next-app@latestパッケージマネージャーにyarnを使用した人は以下のコマンドを実行する。
yarn create next-appコマンドを実行するとすぐにプロジェクトの名前を入力するように求められる。
プロジェクトにおいてTypeScript を使用したい場合は–typescriptフラッグを付けてコマンドを実行する。
プロジェクトの作成には数分掛かる場合もある。
Next.jsアプリの実行
インストールが終わったら以下のコマンドでアプリを起動する。
npm run devyarn devNext.jsのデフォルトURLはhttp://localhost:3000となっている。
ビルドはとても速くコマンドを実行してから2秒ほどで最初のページが表示される。
これはReactやAngularと較べても随分と早い。
デモプロジェクトを使用してみる
今回はプロジェクトを作る時間が無いので、公式ページで公開されているデモプロジェクトを使用しながらサンプルコードを見てみた。
Next.jsを使用してみた感想
今回、Next.jsを使用した感想としては、最初の読み込みがとても早く、ページの切り替えやマウス操作に対する反応といった部分もとにかくスムーズな印象だった。
これで静的なウェブページと同等にSEOで強いならば、かなり強力なフレームワークであることは間違いない。
今後ウェブアプリケーションの作成に携わる人は、このレベルの快適なユーザ体験をスタンダードなものとして目指していく必要があるだろう。
Next.jsはReactの開発者のみでなく、すべてのウェブ制作者が注視すべきフレームワークだった。