Next.jsとは？Reactとの違いやインストール・基本操作を解説！

Reactを学んでいると、「Next.jsも使えるようになった方がいい」という声を耳にする機会が増えてきます。実際にNext.jsは多くの開発現場で採用されており、フロントエンド開発の定番フレームワークといえるでしょう。しかし、

・Next.jsがどのようなフレームワークなのかよくわからない
・Reactとの違いがはっきりしない
・自分の学習段階でNext.jsを導入すべきか判断できない

と感じている方も多いのではないでしょうか。そこでこの記事では、

・Next.jsの概要とReactとの違い
・Next.jsが持つ主な特徴と、それによってできること
・Next.jsのインストールからページ作成までの基本操作

について初心者向けに解説します。

React学習の次のステップとして、Next.jsの全体像をつかむことで、今後の学習計画や技術選定の参考にしてみてください。

公開日：2022年7月27日

Next.js とは？できることを初心者向けに解説

Next.jsとは、Reactをベースに開発された、フロントエンドフレームワークです。そもそも、ReactとはJavaScript言語を用いた、Webサイト上のUIを構築するためのライブラリです。

Next.jsはそのReactに、Web開発を効率化するためのさまざまな機能を追加した「枠組み（フレームワーク）」と考えるとわかりやすいでしょう。

Next.jsを利用すると、以下のようなことが可能になります。

• サーバーを別途用意せずにWebアプリを動作させられる
• ファイルを配置するだけでURLルーティングが自動生成される
• 画像やレンダリングの最適化でページ表示を高速化できる
• 面倒な初期設定なしですぐに開発を始められる

つまり、Next.jsはReactだけでは自分で用意しなければならなかった機能があらかじめ組み込まれており、開発のハードルを大きく下げてくれるフレームワークなのです。

なお、JavaScriptのフレームワークについて詳しく知りたい方は、以下の記事をご覧ください。
▲JavaScriptフレームワークとは何か？最新おすすめ5選を比較

Reactとの違い｜Next.jsが選ばれる理由

ReactとNext.jsは頻繁に比較されますが、両者の関係は「ライブラリとフレームワーク」であり、そもそも役割が異なります。主な違いは以下のとおりです。

項目	React	Next.js
位置づけ	UIを構築するためのライブラリ	Reactをベースにしたフレームワーク
サーバー機能	別途サーバーの用意が必要	サーバー機能を内蔵しており単体で動かしやすい
URLルーティング	ライブラリを追加して手動で設定する	ファイルを配置するだけで自動生成される
開発開始までの準備	ビルドツールの選定や設定を自分で判断する必要がある	最低限の設定ですぐに開発を始められる

初心者にとって、サーバー機能の有無は大きな差です。サーバーを用意するためには、サーバー用のモジュールをインストールし、ディレクトリ構成などを検討する必要があるため、Reactのほうが学習コストや難易度が高くなります。

一方、ReactはRuby on Rails（Ruby）や、Django（Python）のフレームワークに組み込むことが可能です。よって、既に構築済みのアプリケーションへ部分的にUIを導入したいケースでは、Reactのほうが適していることもあります。

　

Next.jsの主な特徴とできること

ここからは、Next.jsの主な特徴を紹介します。Next.jsは初心者でも簡単にページを作成できたり、快適なウェブサイトを構築できたりする機能が備わっています。

• 画像最適化・レンダリング最適化による高速表示
• ファイルベースルーティング機能による直感的な開発
• ゼロコンフィグで環境構築が簡単

画像最適化・レンダリング最適化による高速表示

Next.jsでは画像・レンダリングを最適化してくれます。画像を最適化するメリットは、ページの読み込み速度が高速になることです。読み込み速度の高速化はSEOにも効果があります。

具体的には、画像の配置サイズに合わせて、リサイズしたりWebPなどの軽量フォーマットへ自動変換したりしてから配信してくれます。全てのデータを送るのではなく、必要なサイズのデータだけ送信するため、画像の表示速度が大幅に向上します。

レンダリングに関しては、SSR、SSG、ISRという3つの方式に対応しており、ページの特性に応じて使い分けることで表示を高速化できます。

方式	正式名称	仕組み	向いているページ
SSR	Server Side Rendering	リクエストのたびにサーバー側でHTMLを生成	ユーザーごとに内容が変わるページ
SSG	Static Site Generation	ビルド時にHTMLを事前生成	更新頻度の低い固定的なページ
ISR	Incremental Static Regeneration	SSGをベースに一定間隔でHTMLを再生成	更新頻度がある程度あるページ

通常、ブラウザ側でHTMLを組み立てて表示する処理（クライアントサイドレンダリング）では、JavaScriptの読み込みや実行に時間がかかり、表示が遅くなりがちです。

しかし、SSR・SSG・ISRはいずれもサーバー側であらかじめHTMLを生成するため、ブラウザは受け取ったHTMLを描画するだけで済み、表示速度が大幅に向上します。

現段階では、各方式の仕組みを完全に理解する必要はありません。まずは「Next.jsにはページを高速表示するための仕組みが複数用意されている」という点を押さえておきましょう。

ファイルベースルーティングによる直感的な開発

ファイルベースルーティングとは、ルールに従ってファイルを配置することで、自動的にURLのパスが生成され、アクセス可能になる機能です。

Next.js 13.4（2023年5月）以降、デフォルトのルーティング方式は「App Router」に切り替わりました。App Routerでは、「app」ディレクトリ内にフォルダと「page.tsx」ファイルを配置することで、そのままURLとして認識されます。

例えば「app/blog/page.tsx」というファイルを作成すると、http(s)://localhost/blog というURLでアクセスできるようになります。

なお、以前のバージョンではpagesディレクトリを使った「Pages Router」が標準でした。現在もPages Routerは利用可能ですが、これから学び始めるならApp Routerを前提に進める方がよいでしょう。

App RouterやPages Routerの詳細を知りたい方は、以下の記事をご覧ください。

▶App Routerとは？Pages Routerとの違いや使い方を解説！

ゼロコンフィグで環境構築が簡単

ゼロコンフィグとは、その呼び方の通り、面倒な設定（コンフィグ）がほぼ不要（ゼロ）で開発を始められる仕組みのことです。

Reactで開発環境を構築する場合、ビルドツールの選定や設定を自分で判断する必要があります。初心者にとっては「コードを書く前の準備」だけで大きなハードルになりがちです。

一方Next.jsでは、プロジェクトの初期化コマンドを実行するだけで、最低限の設定を自動で行ってくれます。環境構築でつまずくことなく、すぐにコードを書き始められる点は、初心者にとって大きなメリットです。

プロジェクトが進んで細かい設定を変更したくなった場合は、自動生成されるnext.config.jsというファイルを編集することで対応できます。

最初はデフォルトのまま開発を進め、必要になったタイミングで設定をカスタマイズするという段階的なアプローチが可能です。

　

Next.jsの基本操作を初心者向けに解説

Next.jsの基本的な操作を解説します。初心者の方でも理解できるようにかみ砕いて説明しますので、ぜひ実践してみてください。

• Next.jsのインストール｜プロジェクト作成方法
• 開発サーバーの立ち上げ、動作確認方法
• ページの編集・追加方法

Next.jsを使用するためには、Node.js（npm）を事前にインストールしておく必要があります。Windows・Macどちらの場合も、公式サイトから推奨版をDL・インストールすることができます。コマンドプロンプトを立ち上げて、下記のコマンドを実行し、Nodeとnpmのバージョンが表示されればOKです。

Nodeが準備できていることが確認できたら、Next.jsのプロジェクトを作成していきましょう。

Next.jsのインストール｜プロジェクト作成方法

Next.jsのプロジェクトを保存するディレクトリを作成します。今回は例としてパワーシェルから「test」フォルダを作成し、カレントディレクトリを移動しました。

続いて、以下のコマンドを実行してNext.jsのプロジェクトを作成します。

コマンドを実行すると、プロジェクト名やTypeScript・Tailwind CSSの使用有無などを対話形式で聞かれます。今回はすべてデフォルトの推奨設定のまま進めましょう。

はじめに、プロジェクト名から確認されるため、そのままEnterキーを入力して進めてください。

プロジェクト名「my-app」として、カレントディレクトリ配下に「my-app」フォルダが作成されます。

次に、Next.jsの推奨デフォルト設定を使用するか聞かれるため、ここでもそのままEnterキーを入力します。これで、App Router・TypeScript・Tailwind CSS・ESLintが有効な状態でプロジェクトが自動生成されます。

最後に「Success!」と表示されれば完了です。

開発サーバーの立ち上げ、動作確認方法

続いて、サーバーを立ち上げるために、プロジェクト作成により生成されたmy-appディレクトリに移動し、以下のコマンドを実行してください。

上のような画面が表示されていると、サーバーが立ち上がっている状態です。

この状態で、ブラウザから

http://localhost:3000

にアクセスすると、サーバー起動を確認することができます。

ページの編集・追加方法

続いて、ページの編集や追加を行ってみましょう。今回はタイトル「To get started, ～」を「Youkoso Next.js!」 に変更してみます。変更するためには、my-app\appディレクトリにある、page.tsxを編集します。17行目の「To get started, ～」 を「Youkoso! Next.js!」に変更して、ファイルを保存します。

先ほどの、http://localhost:3000を開いてみましょう。

上記の画面のように表示されます。Next.jsでは、ページを編集すると即座に画面に反映されます。

次に、ページを追加してみましょう。appディレクトリ内にaboutフォルダを作成し、その中にpage.tsxを配置します。ファイルには以下のように記述してください。

ファイルを保存し、http://localhost:3000/about　にアクセスすると下記の画面が表示され、ページが追加されていることがわかります。

前のセクションで紹介したファイルベースルーティングの仕組みにより、ファイルを配置するだけで新しいページが自動的にURLとして認識されるのです。

　

Next.js学習におすすめの関連講座

今回の記事で、Next.jsの概要からReactとの違い、Next.jsのプロジェクトを作成する手順も紹介しました。

Next.jsの次のステップとして新しいページやコンポーネントを自分で追加したり、自分でNext.jsのアプリを作成したりすると、さらに理解が深まるでしょう。

より詳しく学習をしたい方向けに、Udemyでは動画講座を用意しています。実務で使える知識・スキルを体系的に学びたい方は、こちらの講座の受講も検討してみてはいかがでしょうか。

◆NextjsとSupabaseによる高性能Web開発

レビューの一部をご紹介

評価：★★★★★
コメント：質問にも丁寧に調べて答えてくださり、今回もとても満足いく内容でした。途中でnextjsでAPIを作成するところが、前提知識がなく、最初何をしているのか、よくわからなかったので、そこの説明があったら尚わかりやすかったかなと思いました。

評価：★★★★★
コメント：Next.jsに関しての講義を一連受けましたが、supabaseを使うとこんなに便利なのかと思いました。apiサーバを作らなくても自分でアプリ制作などができてしまうのでとても有益な知識を得ることができました。

Next.jsを学んで開発効率を向上させよう！