【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
2026.6.14
この記事は約3分で読めます
2026年のフロントエンド開発で最も使われているNext.js。
• Next.jsとは何か
• セットアップと使い方
• RSC・Server Actionsの理解
本記事ですべてわかります。
筆者：三好アキ（専門用語なしでプログラミング）
▶︎ 三好アキの著書一覧はこちら
Next.jsとは何か？
Reactを使ったウェブ開発で、いま最も使われているフレームワークが「Next.js（ネクストジェーエス）」です。
フレームワークとは、開発に必要な機能をあらかじめセットにしたツールのことです。
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のセットアップ方法
Node.jsの確認
Next.jsを使うにはNode.jsが必要です。
ターミナルで下記を実行して確認してください。
node -vバージョン番号が表示されればインストール済みです。
表示されない場合はNode.jsの公式サイトからLTS版をインストールしましょう。
なぜフロントエンド開発でNode.jsが必要なのか？
その理由は下記の記事をご覧ください▼
インストール
ターミナルで次のコマンドを実行します。
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開発のスタートライン」です。
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個以上まとめた記事はこちらです▼
クライアントコンポーネントへのメタデータの設定方法はこちら▼
Gatsbyのことも少し（余談）
かつてNext.jsには「Gatsby（ギャツビー）」という強力なライバルがいました。
Reactベースの静的サイトジェネレーターで、私自身も数年間はNext.jsよりGatsbyを好んで使っていました。
ページ遷移のスピードや、マークダウンブログの扱いやすさが気に入っていたからです。
しかしその後GatsbyはNext.jsに追い抜かれ、現在は開発がほぼストップしています。
2026年のReactフレームワーク選びで、Gatsbyを選ぶ理由はありません。
現在多くの開発者が検討する選択肢は、Next.js、React + Vite、Astroの3つです。
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記事で順番に解説しています▼
RSC（Reactサーバーコンポーネント）を理解する
RSCはNext.jsの中核となる機能です。
Next.jsのAppフォルダでは、すべてのコンポーネントがデフォルトでサーバーコンポーネントになっています。
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の新機能
Server Actionsとは
Server Actionsは、APIを別途作成しなくても、フォーム送信やデータ更新をサーバー上で直接処理できる仕組みです。
従来のRoute Handlers（APIルート）と比べてコード量を大幅に削減できます。
Server ActionsとAPIの使い分けはこちら▼
Server Actionsでエラーをフロントエンドに表示する方法はこちら▼
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フォルダをアップロードします。
手順の詳細と、よく起きる画像表示問題の解決方法はこちら▼
機能実装：お問い合わせフォーム
Next.jsだけで、外部サービスを使わずにお問い合わせフォームを作る方法はこちら▼
Next.jsが使われているか調べる方法
「このサイト、Next.jsで作られているのかな？」と気になったときは、ブラウザの開発者ツールのコンソールで次のコードを実行するだけで確認できます。
console.log(window?.next.version)Next.jsが使われていればバージョン番号が表示されます。
詳しくはこちら▼
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フォルダ」の相違点などは下記記事を参考にしてください。
また古い情報になりますが、Pagesフォルダを使ったブログ開発や、追加機能の開発方法は下記記事にあります。
• Next.jsにページネーションをNPMパッケージなしで追加する方法
• Next.jsのブログに前後記事へのリンクを追加する方法
サーバーコンポーネントとクライアントコンポーネント、どちらを使えばいいですか？
Next.jsではデフォルトがサーバーコンポーネントです。
useStateやuseEffectなどのHooksを使いたい場合、あるいはボタンクリックなどユーザー操作を扱う場合は、ファイル冒頭に"use client"を追加してクライアントコンポーネントに切り替えます。
「まずサーバーコンポーネントで書いてみて、Hooksやイベントが必要になったら切り替える」という進め方が推奨されている方法です。
フロントエンド全体の学習ロードマップを知りたい
HTML・CSSからReact、TypeScript、Next.jsまでの学習ステップを一本にまとめたロードマップはこちら▼
React × TypeScriptを体系的に学べる教材はありますか？
2026年に必要なReact × TypeScriptの知識を体系的に学べる教材があります。
挑戦してみてください▼
次に読みたい記事特集
いま読まれている記事ベスト7
✤ 筆者 ✤
三好アキ（専門用語なしでプログラミング）
非IT出身。かつてプログラミングの専門用語の壁に何度もぶつかり、挫折した経験から、「専門用語なし」のメソッドを確立。1,200人以上のビギナーのフロントエンド開発入門を成功させる。翔泳社『動かして学ぶ！Next.js/React開発入門』（韓国でも出版）など著書30冊以上。Amazonベストセラー1位複数回獲得。
記事の執筆、法人向けReact研修なども行っています ▼
• 技術記事の執筆について
• 法人研修について