Next.jsとは？Reactとの違い・できることと始め方を最新版（Next.js 16）で解説

Next.js（ネクストジェイエス）とは、Vercel社が開発しているReactのフレームワークです。Reactで画面を作り、Next.jsがURLごとのページ分け、サーバーでのHTML生成、APIの作成、画像やフォントの最適化といった「Webサイトとして公開するのに必要な部分」を受け持つので、1つのプロジェクトでフロントエンドとサーバー側の処理をまとめて書けます。

Next.js公式ドキュメントでは「フルスタックのWebアプリケーションを作るためのReactフレームワーク」と説明されています（Next.js Docs）。この記事では、Next.jsで何ができるのか、Reactだけの場合と何が違うのかを整理し、最新版で実際にアプリを作って動かした結果を載せます。最新版は16.4.1です（npm、2026年10月15日確認）。Next.jsを仕事や副業につなげたい方は「Next.jsの副業の始め方」で案件の種類や契約の注意点をまとめています。

Next.jsとは：Reactとの関係

Reactは、ボタンや一覧などの画面の部品（コンポーネント）を作るためのライブラリです。React自体には、URLとページの対応づけ、サーバーの用意、ビルドの設定といった機能は含まれていません。React公式サイトも、新しくアプリやサイトを作るなら、フレームワークから始めることを勧めています（React: Creating a React App）。Next.jsは、その代表的なフレームワークの1つです。

比べる点	React（ライブラリ単体）	Next.js
役割	画面の部品を作る	Reactで作った部品を、Webサイト・Webアプリとして動かす
ページとURL	別のライブラリで設定する	フォルダの構成がそのままURLになる
HTMLを作る場所	基本はブラウザ	サーバー側で作ってから送れる（初回表示が速く、検索エンジンにも読まれやすい）
API・サーバー処理	別にサーバーを用意する	同じプロジェクトの中に書ける
開発環境	ビルドツールを自分で選んで設定する	コマンド1つで一式そろう

Next.jsでできること

• ページの作成：app/about/page.tsx を置けば /about というページになります。共通のヘッダーやメニューは layout.tsx にまとめます。
• サーバーでのHTML生成と静的生成：アクセスのたびにサーバーでHTMLを作る方法と、ビルド時にHTMLを作っておく方法を、ページや部品ごとに選べます。
• APIの作成：route.ts というファイルで、JSONを返すAPIなどを作れます。
• データベースや外部APIへの接続：サーバー側で動く部品の中から直接データを取りにいけます。接続のためのパスワードはブラウザに送られません。
• 画像・フォント・メタデータの最適化：next/image、next/font、ページごとの metadata などが用意されています。

作れるものの例は、企業サイト、ブログやメディア、ECサイト、会員制のWebサービス、社内の管理画面などです。

今のNext.jsの状況（2026年10月時点）

以下はNext.jsの公式サイトとnpmで確認した内容です（2026年10月15日確認）。

項目	内容
最新版	16.4.1（2026年10月14日公開）。16.4は2026年10月6日に公開（Next.js Blog）
サポート	16.x がActive LTS（2025年10月21日リリース）、15.x がMaintenance LTS。メジャー版はリリースから2年間、重要な修正とセキュリティ修正が提供される（Support Policy）
16での主な変化	Turbopackが安定版になり既定のビルドツールに、middleware.ts は proxy.ts に名前が変わった（Next.js 16）
必要なNode.js	20.9以上（Installation）
セキュリティ更新	月ごとの定例のセキュリティリリースに加え、臨時の更新も出ている（2026年10月14日にも臨時の更新）。公開しているサイトは、ブログを見てこまめに更新する

Next.jsは変化が速いので、1〜2年前の解説記事のコードはそのままでは動かないことがよくあります。古い記事で見かける pages/ フォルダや getServerSideProps は「Pages Router」という以前の方式で、今は app/ フォルダを使う「App Router」が標準です。違いと移行の方法は「Next.js App Router完全ガイド」で扱っています。

Next.jsの始め方：プロジェクトを作って動かす

Node.js 20.9以上を入れたうえで、ターミナルで次のコマンドを実行します。

npx create-next-app@latest my-app --yes
cd my-app
npm run dev

--yes を付けると質問を飛ばして推奨設定で作られます。公式ドキュメントによると、推奨設定はTypeScript、Tailwind CSS、ESLint、App Router、Turbopackで、AIのコーディングエージェント向けの説明ファイル AGENTS.md も作られます（Installation）。実際に実行したところ、Next.js 16.4.1・React 19.3.0のプロジェクトができ、next.config.ts ではCache Components（cacheComponents: true）が有効になっていました。npm run dev のあと、ブラウザで http://localhost:3000 を開くと最初のページが表示されます。

Node.jsの入れ方やエラーが出たときの対処は「Next.jsの環境構築完全ガイド」を参照してください。

作られるフォルダの中身

my-app/
├── app/
│   ├── layout.tsx    # 全ページ共通の枠（html・bodyはここに書く）
│   ├── page.tsx      # トップページ（/）
│   ├── globals.css
│   └── favicon.ico
├── public/           # 画像などの静的ファイル
├── next.config.ts    # Next.jsの設定
├── AGENTS.md         # AIコーディングエージェント向けの説明
├── package.json
└── tsconfig.json

フォルダがURLになり、そこに置くファイルの名前で役割が決まります。page.tsx がページ本体、layout.tsx が共通の枠、loading.tsx が読み込み中の表示、route.ts がAPIです（Project structure）。

基本のコードを書いてみる

ここからのコードは、上で作ったプロジェクトに追加し、next build と next start で実際に動かして確かめたものです。

ページを作る

app/about/page.tsx を作ると、/about でアクセスできるページになります。

export const metadata = {
  title: "このサイトについて",
};

export default function About() {
  return <h1>このサイトについて</h1>;
}

metadata を書き出しておくと、ページの <title> になります。

サーバーコンポーネントとクライアントコンポーネント

App Routerでは、部品は既定でサーバー側で動きます（サーバーコンポーネント）。クリックで数字が増えるような、ブラウザで動く処理（useState やイベント）を使う部品だけ、ファイルの先頭に "use client" と書きます（Server and Client Components）。

"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      {count}回クリックされました
    </button>
  );
}

トップページ（app/page.tsx）からこの部品を使います。ページ自体はサーバーコンポーネントのままです。

import Link from "next/link";
import Counter from "./counter";

export default function Home() {
  return (
    <main>
      <h1>はじめてのNext.js</h1>
      <p>このページはサーバーでHTMLになってから届きます。</p>
      <Counter />
      <Link href="/about">このサイトについて</Link>
    </main>
  );
}

ページ間の移動には <a> ではなく Link を使うと、ページ全体を読み込み直さずに切り替わります。サーバーから届いたHTMLを確かめると、ボタンもすでにHTMLに入っていました。

<h1>はじめてのNext.js</h1>
<button>0<!-- -->回クリックされました</button>

最初の表示はサーバーで作ったHTMLで行い、そのあとブラウザでReactが動き出してクリックに反応するようになります。

APIを作る

app/api/hello/route.ts に、HTTPメソッドの名前で関数を書きます。

export async function GET() {
  return Response.json({ message: "Hello from Next.js" });
}

/api/hello にアクセスすると {"message":"Hello from Next.js"} が返りました。GET しか書いていないので、POSTで送ると405（許可されていないメソッド）が自動で返ります。

データを取ってきて表示する

サーバーコンポーネントは async にして、その中で直接 fetch できます。今のNext.jsでは fetch の結果は既定ではキャッシュされません。結果を使い回したいときは、公式ドキュメントの例どおり "use cache" と cacheLife で有効期間を指定します（Caching）。

import { cacheLife } from "next/cache";

type Post = { id: number; title: string };

export default async function Blog() {
  "use cache";
  cacheLife("hours");

  const res = await fetch("https://api.vercel.app/blog");
  const posts: Post[] = await res.json();

  return (
    <ul>
      {posts.slice(0, 3).map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

取得先の https://api.vercel.app/blog は、Next.js公式ドキュメントの例で使われているサンプルAPIです。ビルドすると、次のように /blog は1時間ごとに作り直すページとして扱われました。

Route (app)      Revalidate  Expire
┌ ○ /
├ ○ /_not-found
├ ○ /about
├ ○ /api/hello
└ ○ /blog                1h      1d

毎回最新のデータを表示したい場合は、"use cache" を付けずに、その部品を <Suspense> で囲みます。どちらにするかはデータの性質で決めます。

Next.jsを学ぶ前に知っておきたいこと

前提の知識	必要な度合い	理由
HTML・CSS	必須	画面の中身はHTMLとCSSで書く
JavaScript	必須	async/await、配列の map、モジュールの import を多用する
React	必須	コンポーネント・props・useState が分からないとつまずく
TypeScript	あると楽	推奨設定がTypeScriptなので、型の書き方を読めると迷わない
Git・ターミナル	あると楽	公開するときにGitHubとの連携を使うことが多い

Reactをまだ触ったことがない場合は、先に「React学習完全ガイド」で基本を押さえてから戻ってくると理解が速くなります。Next.js公式の無料チュートリアル（Learn Next.js）も、手を動かしながら学ぶのに向いています。

作ったアプリを公開するには

公式ドキュメントでは、Next.jsの公開方法として、Node.jsのサーバーとして動かす、Dockerコンテナにする、静的ファイルとして書き出す、各プラットフォーム向けのアダプターを使う、の4つが挙げられています（Deploying）。いちばん手軽なのはVercelにGitHubのリポジトリをつなぐ方法ですが、無料のHobbyプランは非商用の個人利用に限られています（Vercel: Hobby Plan）。仕事のサイトを公開するときは有料プランや他のサービスを検討してください。

目的別に読む：Next.jsの関連記事

やりたいこと	読む記事
環境構築でつまずいた	Next.jsの環境構築完全ガイド
App Routerで書きたい・移行したい	Next.js App Router完全ガイド
GitHubから公開したい	Next.js GitHubデプロイ完全ガイド
Vercelの使い方と無料プランの条件を知りたい	Vercelの使い方
Vercel以外のホスティングも見たい	CloudflareとVercelを徹底比較
検索に出るようにしたい	Next.jsのSEO対策：App RouterのMetadata API・sitemap・robots
ブログサイトを作りたい	Next.js × microCMSでブログを作る
サイト内検索をつけたい	Next.js×Algolia×microCMSで記事検索を作る
アクセス解析を入れたい	VercelでGoogle Analyticsを導入する方法
AI機能を組み込みたい	Vercel AI SDK とは？
仕事・副業につなげたい	Next.jsの副業の始め方

番外編：時計表示のWEBページを公開してみた

next.jsが、どんなフォルダ構成で、どんな感じに動いているのか、見てみるために時計アプリを作って公開してみました。こんなものを公開したところで、何の有用性があるかわかりませんが、「あなたの寿命カウントダウン」みたいなものにしたら、人生の儚さを悟らせる意義深いものになるかもしれません。

よくある質問

Q. Next.jsとは何ですか？

Vercel社が開発しているReactのフレームワークです。Reactで作った画面に、URLごとのページ分け、サーバーでのHTML生成、APIの作成、画像やフォントの最適化などを加えて、Webサイトやアプリとして公開できる形にします。

Q. Next.jsはフルスタックのフレームワークですか？

公式ドキュメントでは、フルスタックのWebアプリケーションを作るためのReactフレームワークと説明されています。画面だけでなく、APIやデータベースへの接続などサーバー側の処理も同じプロジェクトに書けます。

Q. ReactとNext.jsはどちらから学ぶべきですか？

Reactからです。Next.jsはReactのコンポーネントやuseStateを前提にしているため、Reactの基本が分からないまま始めると、どこがNext.jsの機能でどこがReactの機能なのか区別できずにつまずきます。

Q. Next.jsは無料で使えますか？

Next.js自体はオープンソースで無料です。公開先のサービスには料金がかかる場合があり、たとえばVercelの無料のHobbyプランは非商用の個人利用に限られています。

Q. 古い解説記事のコードが動きません。

pages フォルダや getServerSideProps を使ったコードは、以前のPages Routerの書き方です。今の標準は app フォルダを使うApp Routerで、データの取り方やキャッシュの扱いも変わっています。公式ドキュメントと照らし合わせて書き直してください。