【初心者向け・最短30分】Next.js 入門（App Router / Server Actions / Turbopack）：実例コードとチェックリストで安全に始める

🚀 はじめに

このガイドは、最新の Next.js（App Router） を最短ルートで体験するための入門書です。プロジェクト作成 → 最小ページ → 画像最適化 → Server Actions → 環境変数の順に、再現性高く学べます。

この記事でできること

• App Router で新規プロジェクトを作成し、ローカル起動できる
• Server Components / Client Components の使い分けと Server Actions を使った最小フォーム処理が作れる
• 画像最適化と環境変数の基本が理解できる（チェックリストつき）

こんな人におすすめ

• 最短で Next.js を試したい初心者〜中級者
• フロント〜バックを一体で動かす体験をしたい人（API設計の前に“動く全体像”を掴みたい）

前提（迷いやすいポイントの先出し）

• Node.js は LTS の最新（18 以上が目安、20+ 推奨） を利用
• 本記事は App Router 前提（app/ ディレクトリ）
• コードは TypeScript 想定（*.tsx）

💡 概要：Next.js の要点（App Router で何が変わる？）

App Router は React Server Components を活用し、サーバ側での描画・データ取得が標準で簡素化。ファイルベースルーティング、ネストレイアウト、ストリーミング、部分的再生成（ISR） によって、実務で必要な機能が揃います。

• RSC（Server Components）：デフォルトはサーバ実行。機密値や DB アクセスを安全に扱いやすい
• Client Components：UI操作やブラウザ API が必要な箇所に限定して use client を付与
• Server Actions：フォーム送信やデータ更新を API ルートなし で実装可能
• Turbopack：開発サーバが高速。互換性課題がある場合は webpack に切替可能

🗺️ 図解：Next.js の全体像（初心者向け）

Next.js でのページ表示は、サーバ側でのデータ取得と描画を軸に、クライアント側の体験を必要最小限で足す「Server First」な設計です。
下図は、RSC/SSR/SSG・ルーティング・最適化機能の関係を簡略化したものです。

補足

• 図のとおり、データ取得→描画→Webページまでを Next.js が一気通貫で提供します。
• ルーティングは app/ 配下のファイル構造で自動定義され、画像・フォント等の最適化もビルトインです。

🔍 Next.jsとは？

Next.js は React をベースにしたフレームワークで、ルーティング・レンダリング・最適化・ビルドまでを統合的に提供します。
App Router では React Server Components を採用し、サーバ側でのデータ取得や描画を標準化しています。

• SSR / SSG / ISR を標準サポート：初期表示が速く、SEO に強い
• ファイルベースルーティング：app/ ディレクトリの構造がそのまま URL になる
• ビルトインの最適化：画像・フォント・リンクの最適化、ストリーミング、キャッシュ制御
• 開発体験（DX）が高い：TypeScript 前提のテンプレ、ホットリロード、Turbopack による高速起動
• Server Actions：API ルートなしでフォーム送信/ミューテーションが可能

🎯 Next.js のメリット：何のためのシステムで、何ができる？

Next.js は「React でプロダクション品質の Web を作るためのオールインワン」です。導入の効果を、目的別に整理します。

1) パフォーマンス / SEO

• SSR/SSG/ISR により、初期描画が速い & 検索クローラに優しい
• 画像・フォントの自動最適化で CLS/LCP を改善しやすい
• ルーティングやメタの管理が統合され、OGP/メタの整備が容易

2) 開発効率 / DX

• ファイルベースルーティングとレイアウトのネストでページ追加が高速
• Server First 設計で、データ取得・権限・機密値をサーバ側に寄せやすい
• Turbopack による爆速の開発体験、TypeScript との親和性

3) セキュリティ / 保守

• 機密ロジックやトークンを**サーバ側（RSC/Actions）**に閉じ込めやすい
• API 境界の削減（Server Actions でAPI ルート不要なケースが増える）
• App Router の約束事が明確で、リポジトリの構造が保守しやすい

4) 拡張性 / 配置

• Edge / Node いずれにもデプロイ可能（Vercel など各種プラットフォーム）
• キャッシュ/再検証（revalidatePath/revalidateTag）でスケールと鮮度の両立
• 画像/CDN・ストレージ・DB（Prisma/Supabase など）との連携がしやすい

5) 代表的なユースケース

• コーポレートサイト / プロダクトLP：SSG/ISR で高速・低コスト
• ダッシュボード / 管理画面：RSC で安全にデータ取得、Client は必要最小限
• SaaS / 会員サイト：Server Actions＋認可でAPI 実装の手間を削減
• EC / コンテンツサイト：ISR で在庫/価格だけを素早く再生成

一言でいうと
Next.js は「React 製プロダクトを “速く・安全に・保守しやすく” 作るための土台」。
ルーティング・描画・最適化・配信までを一気通貫で提供し、学習と運用のコストを下げます。

🧭 前提：環境チェックと用語の整理

次の一歩を踏み出す前に、環境の差異でつまずきやすい点を先に潰します。

操作

• Node.js / パッケージマネージャの確認

node -v
npm -v   # or pnpm -v / yarn -v

目的

• 以降の手順が失敗しないよう、バージョン由来のエラーを先に回避する

結果（この時点でできること）

• Node.js が LTS で動作しているか確認済み。以降の create-next-app が成功しやすい状態

注意

• 古い Node.js だと create-next-app の実行や依存の解決で失敗することがあります。LTS の最新（18 以上、推奨 20+） を使用してください。
• 社内プロキシ・企業PC の制限がある場合、npx 実行やパッケージ取得が遮断されることがあります。

📱 Step 1：プロジェクト作成と起動（App Router 前提）

このステップでは、最小構成の Next.js プロジェクトを作成・起動します。

操作

1. 対話式で作成（最小の推奨構成を選択）

npx create-next-app@latest my-next-app
# 対話で TypeScript / ESLint / App Router / Turbopack を選択

2. 生成後に開発サーバを起動

cd my-next-app
npm run dev  # pnpm dev / yarn dev でもOK

目的

• App Router ベースの開発を始めるための雛形を得る

結果（この時点でできること）

• http://localhost:3000/ で初期ページが表示できる
• 開発サーバは Turbopack で高速起動（互換性の都合で切り替え可能）

補足

• 互換性の課題が出る場合は next dev --webpack で webpack に切替可能。
• 企業環境ではパッケージマネージャ（npm / pnpm / yarn）の使用可否を確認しましょう。

⚙️ Step 2：最小ページ（Server Component）の作成

App Router の基本を押さえるため、既定の Server Component でページを作ります。

操作

• app/page.tsx を編集して、サーバ時刻を描画

// app/page.tsx — 既定は Server Component（"use client" を付けない）
export default async function Page() {
  const now = new Date().toISOString();
  return (
    <main style={{ padding: 24 }}>
      <h1>Next.js へようこそ 🎉</h1>
      <p>サーバで描画しました（{now}）</p>
    </main>
  );
}

目的

• Server Components が既定であることと、サーバ実行の利点（機密/データ取得の安全性）を体感

結果（この時点でできること）

• ページの初期レンダリングがサーバ側で実行されることを確認できる

注意

• ブラウザ API（window など）を使うコードは Client Component に分離し、必要箇所だけ use client を付与します。

🖼️ Step 3：リンクと画像最適化（next/link / next/image）

ナビゲーションと画像の最適化を最小構成で組み込みます。

操作

1. app/about/page.tsx を作成（遷移先）

// app/about/page.tsx
export default function About() {
  return (
    <main style={{ padding: 24 }}>
      <h1>About</h1>
      <p>これは About ページです。</p>
    </main>
  );
}

2. app/page.tsx にリンクと画像を追加

// app/page.tsx
import Link from "next/link";
import Image from "next/image";

export default function Page() {
  return (
    <main style={{ padding: 24 }}>
      <h1>リンクと画像最適化</h1>
      <p>
        /about/about へ移動</Link>
      </p>
      /profile.png
    </main>
  );
}

目的

• ルーティング（ファイルベース）と画像最適化（遅延読込・レスポンシブ）を最短で体験

結果（この時点でできること）

• /about へクライアント遷移でき、/public/profile.png を最適化配信できる

注意

• 外部ドメイン画像は next.config.* の images.remotePatterns（または domains）設定が必要。未設定だと本番で表示されません。

🧪 Step 4：Server Actions で ToDo を追加（最小フォーム）

API ルートなしでフォーム送信＆ミューテーションを実装する例です。

操作

1. Server Action を定義（app/actions.ts）

// app/actions.ts — "use server" でエクスポート関数を Server Action 化
"use server";

let tasks: string[] = [];

export async function addTask(
  prevState: { error?: string },
  formData: FormData
) {
  const title = (formData.get("title") as string)?.trim();
  if (!title) return { error: "タイトルを入力してください" };
  tasks.unshift(title);
  return { error: "" };
}

export async function listTasks() {
  // 実務では DB/ORM を呼び出す
  return tasks;
}

2. ページ側で利用（一覧取得は Server、フォームは Client）

// app/page.tsx — Server と Client を分離して安全に実装
import { listTasks, addTask } from "./actions";
import { revalidatePath } from "next/cache";

export default async function Page() {
  const items = await listTasks(); // Server Component から安全に取得

  // Server Action を経由して更新後に再描画
  async function addAndRevalidate(_state: any, formData: FormData) {
    "use server";
    const res = await addTask(_state, formData);
    revalidatePath("/"); // 最新一覧を反映
    return res;
  }

  return (
    <main style={{ padding: 24 }}>
      <h1>Server Actions で ToDo を追加</h1>
      <TaskForm items={items} action={addAndRevalidate} />
    </main>
  );
}

// Client コンポーネント（ブラウザのフォーム送信を担当）
"use client";
import { useActionState } from "react";

function TaskForm({
  items,
  action,
}: {
  items: string[];
  action: any;
}) {
  const [state, formAction, pending] = useActionState(action, { error: "" });

  return (
    <>
      <form action={formAction} style={{ display: "flex", gap: 8, marginBottom: 16 }}>
        <input name="title" placeholder="やること" />
        <button disabled={pending} type="submit">
          {pending ? "追加中..." : "追加"}
        </button>
      </form>
      {state?.error && <p style={{ color: "red" }}>{state.error}</p>}
      <ul>
        {items.map((t, i) => (
          <li key={i}>{t}</li>
        ))}
      </ul>
    </>
  );
}

目的

• Server Actions で API ルートなしのフォーム送信とミューテーションを体験

結果（この時点でできること）

• フォーム送信で ToDo がメモリに追加され、一覧へ反映される

補足

• 実務では DB や認可と組み合わせます。useActionState の型付けやエラーハンドリングを整えると堅牢性が上がります。

🔐 Step 5：環境変数の基本（サーバとクライアントの境界）

公開してよい値と機密値で扱いを分けます。

操作

1. .env.local を作成（Git 管理外）

# ブラウザへ埋め込んでよい値（Public）
echo 'NEXT_PUBLIC_API_BASE=https://api.example.com' >> .env.local
# 機密値（Server Only）
echo 'SECRET_TOKEN=xxxx' >> .env.local

2. 参照コード（サーバ／クライアント）

// サーバ側：機密値（例：SECRET_TOKEN）
export async function getSecret() {
  return process.env.SECRET_TOKEN; // クライアントへは露出しない
}

// クライアント側：NEXT_PUBLIC_ で始まる値のみ参照可能
export const apiBase = process.env.NEXT_PUBLIC_API_BASE;

目的

• クライアントへ露出してよい値とサーバ専用の機密値を混同しない

結果（この時点でできること）

• .env.local の読み込みと、境界の安全な取り扱いができる

注意

• NEXT_PUBLIC_ なしの値は クライアントでは参照不可。機密値は必ずサーバ側でのみ利用してください。

⚠️ よくあるつまずき（チェックリスト）

• Node が古い → node -v を確認し、LTS の最新（18 以上、推奨 20+）へ更新した
• NEXT_PUBLIC_ を付け忘れ → クライアントから環境変数が undefined。公開値は NEXT_PUBLIC_ を付与
• Server/Client の境界違反 → Client コンポーネントで fs 等を呼ばない。"use client" は必要最小限に
• 外部画像が表示されない → next.config.* の images.remotePatterns（または domains）を設定
• Turbopack 互換でエラー → まず最小構成で再現確認。必要なら next dev --webpack に切替
• ESLint/TS でビルド停止 → lint をスクリプトで分離し、CI/IDE で型チェック。ビルド時は厳格エラーにしすぎない
• App Router 前提のパス構成ミス → app/ 配下に page.tsx を置き、見出し直下に要約を入れる運用を徹底（本文構造の乱れを回避）

📚 参考リンク（公式優先）

• インストール / はじめる（App Router / 必要要件）
  • https://nextjs.org/docs/app/getting-started/installation
• データ取得（RSC / キャッシュ / ストリーミング）
  • https://nextjs.org/docs/app/building-your-application/data-fetching/fetching
• Server Actions（フォーム / ミューテーション）
  • https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
• 画像最適化 / Image コンポーネント
  • https://nextjs.org/docs/app/api-reference/components/image
• 環境変数
  • https://nextjs.org/docs/app/building-your-application/configuring/environment-variables
• Turbopack
  • https://nextjs.org/docs/app/api-reference/turbopack

注記
公式の UI/仕様は随時更新されます。画面ラベルや初期テンプレートに差異がある場合は、上記リンクの最新情報を参照してください。

🔧 拡張案（次にやると良いこと）

Next.js の基本を押さえたら、以下の拡張を検討すると実務レベルに近づきます。

1. DB連携と認証

   • Prisma + PostgreSQL / Supabase を導入し、Server Actions から安全に CRUD。
   • 認証は NextAuth.js や OAuth を組み合わせ、セッション管理を強化。

2. ISR（部分的再生成）でキャッシュ最適化

   • fetch(..., { next: { revalidate: 10 } }) のように設定し、鮮度とパフォーマンスを両立。
   • 商品情報やニュースなど、更新頻度が高いページに有効。

3. 画像最適化の高度化

   • sizes 属性や placeholder="blur" を活用し、CLS（レイアウトシフト）をさらに低減。
   • 静的 import でビルド時に最適化。

4. 構造化データ（SEO強化）

   • JSON-LD で Article / BreadcrumbList を追加し、検索結果をリッチ化。
   • PaperMod の head.html にテンプレートを組み込む。

5. パフォーマンス計測と改善

   • Lighthouse / Core Web Vitals を定期チェック。
   • next/script の strategy="lazyOnload" や font optimization を活用。

6. Turbopackの理解と互換性対応

   • 大規模化に備え、Webpack fallback の設定やビルド戦略を把握。
   • プラグインやローダの互換性を検証。

7. CI/CDとデプロイ最適化

   • Vercel / Netlify での自動デプロイ。
   • GitHub Actions で lint・型チェック・ビルドを自動化。

ポイント
これらを順次導入することで、Next.js プロジェクトは「高速・安全・保守しやすい」状態に進化します。

🎯 まとめ

• create-next-app で最短起動 → App Router 前提で Server First を体験
• Server Actions により、API ルートなしでフォーム送信や更新が可能
• 画像最適化と環境変数の境界を押さえると、実務の初手でつまずきにくい
• 互換性課題や仕様変更は公式ドキュメントを都度参照しながら進めれば安全です