【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説

Next.jsとは何か？

Reactを使ったウェブ開発で、いま最も使われているフレームワークが「Next.js（ネクストジェーエス）」です。

「フレームワーク」とは、開発に必要な機能をあらかじめセットにしたツール。

しかし、なぜReact開発でそのようなツールが必要なのでしょうか？

実はReactはそれ単体では、追加設定が必要になる機能が多くあります。

---

• SEOに有効なサーバーサイドレンダリング
• ファイルベースのルーティング
• サーバー機能（APIの開発）
• 画像・フォントの最適化

---

これらをすぐに使える状態でパッケージ化したのがNext.jsになります。

「Reactをベースにしたフルスタックのウェブフレームワーク」という説明がよくされますが、要するに「Reactでできること以上のことができるツール」と理解しておけば十分です。

Next.jsとReact + Viteの違い

Next.jsの話をすると必ず出てくる疑問があります。

「React + ViteとNext.js、どちらを選ぶべきか？」

大まかな使い分けはこうなります。

---

• シンプルなウェブアプリや管理画面 → React + Vite

• SEOが重要なウェブサイト → Next.js

• バックエンドも一緒に開発したい → Next.js

• とにかくシンプルに始めたい → React + Vite

---

これだけではどちらを選ぶべきか決められない人には、詳しい解説があります。

React + ViteとNext.jsの違いと選び方を解説した記事です▼

なお、「そもそもReact + Viteとは何か？」、そして「Reactの基礎も知りたい」という人は下記ガイドを参考にしてください。

包括的に解説しています▼

Next.jsのセットアップ方法

Node.jsの確認

Next.jsを使うにはNode.jsが必要です。

ターミナルで下記を実行して確認してください。

node -v

バージョン番号が表示されればインストール済みです。

表示されない場合はNode.jsの公式サイトからLTS版をインストールしましょう。

さて、「なぜフロントエンド開発でNode.jsが必要なのか？」と思う人がいるかもしれません。

その理由は下記記事で解説しています。1分で読めます▼

インストール

ターミナルで次のコマンドを実行します。

npx create-next-app

いくつか質問が出てきますが、下記のように答えてください。これ以外は「No」で大丈夫です。

✔ Would you like to use TypeScript?  → 「Yes」
✔ Would you like to use React Compiler?  → 「Yes」
✔ Would you like to use Tailwind CSS?  → 「No」
✔ Would you like to use App Router? (recommended) → 「Yes」

特に「App Router」は必ず「Yes」を選んでください。

Next.jsバージョン13以降の標準的な開発スタイルに対応するために必要です。

インストールから起動、そしてコードの書き方までのより詳しい手順を知りたい方は、こちらの記事も参考にしてください▼

起動する

インストールが完了したら次のコマンドを実行します。

cd my-app
npm run dev

ブラウザでhttp://localhost:3000を開くと、Next.jsの画面が表示されます。

これが「Next.js開発のスタートライン」です。

なお開発中にモバイル端末での表示も確認したい場合は、こちらの記事も参考にしてください▼

• Next.js開発中、画面の表示をモバイル端末で確認する方法

Appフォルダ（App Router）について知っておくこと

Next.jsバージョン13から、「App Router」がデフォルトになりました。

構造上の最大の特徴は「フォルダ名がそのままURLになる」ことです。

たとえばapp/blog/page.tsxを作ると、/blogというURLのページが完成します。

覚えておきたい特殊なファイルが3つあります。

---

• page.tsx → そのURLのページを表示するファイル

• layout.tsx → すべてのページに共通して適用されるレイアウト

• loading.tsx → データ取得中に表示されるローディング画面

---

Appフォルダで変わった点、知っておくと便利なことを20個以上まとめた記事はこちらです▼

Next.jsがSEOに強いとはいえ、メタデータの設定はマストです。

クライアントコンポーネントへのメタデータ設定方法を解説している記事があります。

参考にしてください▼

Gatsbyのことも少し（余談）

かつてNext.jsには「Gatsby（ギャツビー）」という強力なライバルがいました。

Reactベースの静的サイトジェネレーターで、私自身も数年間はNext.jsよりGatsbyを好んで使っていました。

ページ遷移のスピードや、マークダウンブログの扱いやすさが気に入っていたからです。

しかしその後GatsbyはNext.jsに追い抜かれ、現在は開発がほぼストップしています。

2026年のReactフレームワーク選びで、Gatsbyを選ぶ理由はありません。

現在多くの開発者が検討する選択肢は、Next.js、React + Vite、Astroの3つです。

なお、いま出てきた「静的サイトジェネレーター」とは、Static Site Generationという、Next.jsでも現役で使われているレンダリング技術です。

いま出てきたAstroを含めた静的サイトジェネレーターについては、下記記事でまとめてあります（なお、本サイトはAstro v7を使っています）▼

RSC・SSR・SPA・MPA — レンダリングの流れを理解する

Next.jsを理解するうえで、避けて通れない概念があります。

「MPA」「SPA」「SSR」「RSC」という4つの技術の違いです。

これらは時代とともに進化してきたもので、Next.jsはSSRとRSCの両方を活用するフレームワークです。

	登場時期
MPA（マルチ・ページ・アプリケーション）	2000年ごろ
SPA（シングル・ページ・アプリケーション）	2010年ごろ
SSR（サーバー・サイド・レンダリング）	2016年ごろ
RSC（Reactサーバー・コンポーネント）	2022年ごろ

それぞれの仕組みと、これらの技術が登場した理由については下記4記事で順番に解説しています▼

なお、この中でも特にSPAは、React + Viteアプリのデフォルトの仕組みでもあり、つまずきやすいポイントです。

「複数ページあるのに、なぜ”シングルページ”と呼ぶのか」という素朴な疑問から、静的サイト・動的サイトの歴史をたどってSPAの仕組みを掘り下げた記事もあります。

SPAのメリット・デメリットをもう一段深く理解したい方は、あわせてご覧ください▼

• SPAサイトとは？仕組み・メリット・デメリット・実例を2分で解説

RSC（Reactサーバーコンポーネント）を理解する

RSCはNext.jsの中核となる機能です。

Next.jsのAppフォルダでは、すべてのコンポーネントがデフォルトでサーバーコンポーネントになっています。

• monotein.com/present

RSCとRCC（クライアントコンポーネント）の違い

RSCが登場したことで、従来のReactコンポーネントに「RCC（Reactクライアントコンポーネント）」という名前がつきました。

それぞれにできることとできないことがあります。

	RSC	RCC
データベースからデータを取得する	○	×
onClickやonChangeなどのユーザー操作機能	×	○
useStateやuseEffectなどのHooks利用	×	○

RCCを使いたい場合はファイルの先頭に"use client"を追加します。

この使い分けの背景と命名の経緯はこちら▼

RSCを使うとJavaScriptのバンドルサイズがどれだけ小さくなるか、実際の数値で確認した記事はこちら▼

コードでRSCの動きを確認したい人はこちら▼

RSCの仕組み・メリット・デメリット・ストリーミングまで一段深く、よりはっきりと理解したい人はこちら▼

RSC・SSR・SPA・MPAの流れとReact 19の新機能まで体系的にまとめたガイドも参考にしてください▼

Server ActionsとReact 19の新機能

Next.jsはReactの機能が先行して導入されることがよくあります。

これから紹介するReactバージョン19の新機能も、Next.jsでは先行して利用可能でした。

Server Actionsとは

Server Actionsは、APIを別途作成しなくても、フォーム送信やデータ更新をサーバー上で直接処理できる仕組みです。

従来のRoute Handlers（APIルート）と比べてコード量を大幅に削減できます。

Server ActionsとAPIの使い分けはこちら▼

Server Actionsでエラーをフロントエンドに表示する方法はこちら▼

なおフォーム送信やデータ更新という操作はCRUDと一般的に呼ばれるもので、あらゆるアプリの操作のベースになっています。

詳しくは▼

• アプリの機能はたった4つだけ

useActionState

React 19で導入されたuseActionStateは、Server Actionsと組み合わせて使う新しいHooksです。

従来のuseStateを使うよりもコード量を抑えられます。

useActionStateに渡す関数の書き方はこちら▼

useOptimistic（楽観的更新）

LINEなどでメッセージを送ると、すぐに表示に反映されます。

あれが「楽観的更新」です。

バックエンドからの完了通知を待たずに画面を先に更新することで、ユーザー体験を向上させます。

React 19のuseOptimisticはその実装を簡単にするHooksです▼

useEffectEventと<Activity>

React 19（v19.2）では、さらに2つの新機能が追加されています。

---

• useEffectEvent
useEffectの依存配列問題を解決する新しいHooks

• <Activity>
コンポーネントの表示・非表示を切り替えながら、非表示時もstateを保持できる機能

---

詳しくは下記の記事をご覧ください。

Next.jsを公開する

Vercelでの公開

Next.jsはVercelで公開するのが一般的です。

開発元の会社が提供するプラットフォームなので、Next.jsのすべての機能を制約なしに使えます。

なお、Vercelが自動生成するドメインを好きな名前に変更する方法はこちら▼

CORS問題が発生する場合の対処法は、下記記事を参考にしてください▼

Vercel以外での公開

NetlifyなどVercel以外でNext.jsを公開することも可能です。

その場合はnext.config.tsにoutput: "export"を追加し、npm run buildで生成されたoutフォルダをアップロードします。

手順の詳細と、よく起きる画像表示問題の解決方法はこちら▼

公開時に特定のURLをユーザーから隠したい場合は、redirectsを使う方法が簡単です▼

機能実装：お問い合わせフォーム開発

Next.jsではフロントエンドだけでなく、バックエンドの機能も実装できます。

そのため「お問い合わせフォーム」のような、バックエンドが必要な機能もNext.jsだけで実現可能です。

外部サービスを使わず、お問い合わせフォームをNext.jsだけで作る方法はこちら▼

Next.jsが使われているか調べる方法

「このサイト、Next.jsで作られているのかな？」と気になったときは、ブラウザの開発者ツールのコンソールで次のコードを実行するだけで確認できます。

console.log(window?.next.version)

Next.jsが使われていればバージョン番号が表示されます。

詳しくはこちら▼

Next.jsを学べる書籍

私は非IT出身からプログラミングを学び始め、現在は「専門用語なしでプログラミング」をテーマに教材制作や執筆を行っています。私の自己紹介はこちら▼

私の経験からNext.jsを学ぶのに最適な教材を紹介します。

翔泳社から出版

2024年9月、翔泳社から『動かして学ぶ！Next.js/React開発入門』を出版しました。

Next.jsをはじめて使う人を対象にした実践形式の入門書で、バックエンドからフロントエンドまで、フルスタックアプリを一冊で開発できる内容になっています。

この本は韓国語にも翻訳され、韓国でも出版されています。

最新バージョン16対応のKindle入門書

最新のNext.jsバージョン16に対応した入門書も用意しています。

ビギナー向けに、インストールからフルスタックアプリの公開まで実践形式で解説しています。

よくある質問

Next.jsを学ぶ前に、Reactは必要ですか？

Next.jsのベースはReactです。

Reactの基礎を知っていると、Next.jsの学習はスムーズに進みます。

しかし「Reactを完璧にマスターしてから」という必要はありません。

「Reactに入門した段階でNext.jsにも触り、往復しながら理解を深める」という方法もあります。

Reactを難しく感じている人はこちらのガイドを参考にしてください▼

TypeScriptは必須ですか？

2026年の現場では、Next.js + TypeScriptの組み合わせがスタンダードです。

最初からTypeScriptで書き始めると、後がラクになるでしょう。

TypeScriptを難しく感じる理由と乗り越え方はこちら▼

新しいAppフォルダではなく、古いPagesフォルダを使っています。変更点を教えてください。

Next.jsバージョン13からデフォルトになった「Appフォルダ」と、それ以前の「Pagesフォルダ」の相違点などは下記記事を参考にしてください。

• Next.jsバージョン13の変更点を時短で解説

• Next.js 13のコード変更点（パス取得／リダイレクト／リクエストbodyの解析など）

また古い情報になりますが、Pagesフォルダを使ったブログ開発や、追加機能の開発方法は下記記事にあります。

• Next.jsにマークダウンのブログ機能を追加する方法

• Next.jsにページネーションをNPMパッケージなしで追加する方法

• Next.jsのブログに前後記事へのリンクを追加する方法

サーバーコンポーネントとクライアントコンポーネント、どちらを使えばいいですか？

Next.jsではデフォルトがサーバーコンポーネントです。

useStateやuseEffectなどのHooksを使いたい場合、あるいはボタンクリックなどユーザー操作を扱う場合は、ファイル冒頭に"use client"を追加してクライアントコンポーネントに切り替えます。

「まずサーバーコンポーネントで書いてみて、Hooksやイベントが必要になったら切り替える」という進め方が推奨されている方法です。

• monotein.com/present

フロントエンド全体の学習ロードマップを知りたい

HTML・CSSからReact、TypeScript、Next.jsまでの学習ステップを一本にまとめたロードマップはこちら▼

React × TypeScriptを体系的に学べる教材はありますか？

「React × TypeScriptマスター」という教材があります。

「なぜそうなるのか」、「どうつながっているのか」を軸に、React × TypeScriptの全体像を体系的に学べる教材です。

Next.jsはReactの上に成り立っているので、その基礎となるReact × TypeScriptを体系的に理解しているほど、Next.js開発もスムーズになります。

この教材を作った理由や利用者の声、返金保証の話などを下記の記事で詳しく書いてあるので、参考にしてください▼

Next.jsの基礎となるReact × TypeScriptを、正しい順番で体系的に学べる教材はこちらです▼

⚫︎ monotein.base.shop/p/00005