Apricot Web Production
- JavaScript
Next.js とは
Next.jsとは、Reactをベースに開発された、フロントエンドフレームワークです。ReactはJavaScript言語を用いた、Webサイト上のUIを構築するためのライブラリで、フレームワークとは、開発を効率化するための枠組みです。
Next.jsは「URLルーティング」と呼ばれるリクエストされたURLに対して呼び出すアクションを決定する仕組みや、Webアプリ開発を効率よくするための機能が多く含まれているのが特長です。
1
Reactとの違い
Reactをベースに開発されたNext.jsは、Reactと度々比較されます。
Next.jsとReactの1番の違いは、サーバー機能の有無です。Next.jsはサーバー機能を持っていますが、Reactにはサーバー機能がありません。つまり、Next.jsは単体でWebアプリを動作させることができますが、Reactは別途サーバーを用意する必要があります。サーバーを用意するということは、サーバー用のモジュールをインストールし、ディレクトリ構成などを検討する必要があるため、Reactのほうが学習コストや難易度が高くなります。
2つ目の大きな違いは、Next.jsはURLルーティングを自動生成してくれることです。初期化時に生成されたフォルダにファイルを配置すると、それに合わせてURLが生成されます。
上記の違いを見ると、Next.jsのほうがメリットが大きいように感じられますが、Reactにもメリットはあります。ReactはRuby on Rails（Ruby）や、Django（Python）のフレームワークに組み込むことが可能です。よって、既に構築済みのアプリケーションに導入する際、Reactだと手間がかかりません。
2
Next.jsの主な特徴
ここからは、Next.jsの主な特徴を紹介します。Next.jsは初心者でも簡単にページを作成できたり、快適なウェブサイトを構築できたりする機能が備わっています。
画像・レンダリングの最適化ができる
Next.jsでは画像・レンダリングを最適化してくれます。画像を最適化するメリットは、ページの読み込み速度が高速になることです。読み込み速度の高速化はSEOにも効果があります。具体的には、画像の配置サイズに合わせて、オリジナル画像をトリミングしてから配信してくれます。全てのデータを送るのではなく、必要なサイズのデータだけ送信するため、画像の表示速度を大幅に向上できます。
レンダリングに関しては、SSR、SSG、ISRという3つの方式に対応しているため、利用することで、ページ表示を高速化できます。SSR（Server Side Rendering）とは、ブラウザではなく、サーバー側でレンダリングしてクライアント側で描画する方式です。クライアント側は描画するだけなので、高速に動作します。
SSG（Static Site Generator）は、サーバー側で事前にビルドし、HTMLを構築しておく方式です。クライアントからリクエストされたときに、HTMLを表示するだけなので、SSGよりも高速です。ISR（Incremental Static Regeneration）は、SSGと基本的には一緒です。SSGは事前にビルドしているため、表示される情報が更新されにくいという課題がありますが、ISRはバックグランドで一定期間ごとに再ビルドをする仕組みなので、更新頻度が高いページに効果的な方式です。
ファイルベースルーティング機能がある
ファイルベースルーティングとは、ルールに従ってファイルを配置することで、自動的にURLのパスが生成され、アクセス可能になる機能です。
Next.jsでは、初期化を行うと、「Pages」フォルダが生成されます。そのフォルダ内にファイルを配置すると、そのページへの遷移が可能となります。例えば、/pages/blog.jsxというファイルを作成すると、http(s)://localhost/blog というURLでアクセスできるようになります。
ゼロコンフィグ機能がある
ゼロコンフィグとは、その呼び方の通り、面倒な設定（コンフィグ）は不要（ゼロ）という機能です。Reactでは、webpackなどのパッケージをインストールし、一から設定する必要があります。一方Next.jsでは、最低限の設定を自動で行ってくれるため、開発対象となるプロジェクトに合わせたパッケージのインストールと、簡易的な設定を行うだけで動作します。
細かく設定を変更したい場合は、next.config.jsというファイルを作成し、設定を変更することで、webpackの設定を自動で書き換えてくれます。