概要

最新のNext.jsを現場で使うために実践的な知識を詰め込んだ一冊です。フレームワークの基礎はもちろん，パフォーマンスを上げるための知識や関連ライブラリまで，詳細なサンプルコードをもとに解説していきます。

こんな方におすすめ

• 最新のNext.jsに入門したいエンジニアやNext.jsに多少の経験があるが，より良い使い方を知りたいエンジニア

目次

第1章：Next.jsの基礎

• 1.1：Next.jsプロジェクトの始め方
• 1.2：アプリケーションのルーティング
• 1.3：SPAならではのナビゲーション
• 1.4：ネスト可能なレイアウト

第2章：Server Componentとレンダリング

• 2.1：Server ComponentとClient Component
• 2.2：Server Componentのデータ取得
• 2.3：動的データ取得と静的データ取得
• 2.4：Routeのレンダリング

第3章：App Routerの規約

• 3.1：Segment構成ファイル
• 3.2：Segment構成フォルダ
• 3.3：Parallel RoutesとIntercepting Routes
• 3.4：Routeのメタデータ

第4章：Route Handler

• 4.1：Route Handlerの定義
• 4.2：Route Handlerのレンダリング
• 4.3：Route Handlerの使用例

第5章：サンプルアプリの概要

• 5.1：サンプルコードの概要とシステム構成
• 5.2：ローカル開発環境の構築
• 5.3：ORMライブラリ「Prisma」の概要
• 5.4：DBビジュアルエディター「Prisma Studio」の概要
• 5.5：開発環境のストレージサーバー

第6章：データ取得とキャッシュ

• 6.1：サンプルコード共通のUIコンポーネント
• 6.2：fetch関数でのデータ取得
• 6.3：fetch関数のRequestのメモ化
• 6.4：fetch関数のキャッシュ
• 6.5：Prisma Clientでのデータ取得
• 6.6：Prisma ClientのRequestのメモ化
• 6.7：Prisma Clientのキャッシュ

第7章：認証機能

• 7.1：環境変数の設定
• 7.2：OAuthクライアントの作成
• 7.3：NextAuth.jsの導入
• 7.4：ログインユーザーのデータ表示
• 7.5：閲覧ユーザーに応じた表示分岐

第8章：モーダル表示とデータ連携

• 8.1：汎用的なモーダルコンポーネント
• 8.2：Parallel RoutesとIntercepting Routesを用いたモーダル
• 8.3：バックエンド間連携によるデータ保存
• 8.4：バックエンド間連携によるデータ削除

第9章：データ更新とUI

• 9.1：Server Actionの基礎
• 9.2：Server Actionによるデータ保存
• 9.3：Server Actionによるデータ削除
• 9.4：Server Actionのエラーハンドリング231
• 9.5：Server ActionとフィードバックUI表示
• 9.6：Server Actionによる楽観的UI更新
• 9.7：Server ActionのFormバリデーション
• 9.8：Revaliateの設計

第10章：パフォーマンスとキャッシュ

• 10.1：コンポーネント構造のパフォーマンスへの影響
• 10.2：fetchCacheの設定
• 10.3：静的Routeを増やす実装
• 10.4：SSG Routeの実装
• 10.5：SSG Routeのパフォーマンスの定量評価
• 10.6：Next.jsによるアセットの最適化
• 10.7：Next.jsの4種類のキャッシュ

付録A：Prisma

• A.1：Prisma schemaの概要
• A.2：Prisma Clientの概要
• A.3：Prismaのマイグレーションとシーディング

サポート

正誤表

本書の以下の部分に誤りがありました。ここに訂正するとともに，ご迷惑をおかけしたことを深くお詫び申し上げます。

第1章　P.2：見出し

第1章　P.3：見出し

このほか，第1章にて「creaet-next-app」と誤って表記されている箇所はいずれも「create-next-app」となります。

第1章　P.19：見出し

第1章　P.19：コードブロック3行目

import { useRouter } from "next/router";

import { useRouter } from "next/navigation";

第1章　P.22：本文下から3行目

第2章　P.38：npm-scriptの内容

    "clean-dev": "rm -rf .next/cache/fetch-cache && npm run dev",
    "clean-build": "rm -rf .next/cache/fetch-cache && npm run build",
    "clean-start": "rm -rf .next/cache/fetch-cache && npm run build && npm start"

    "clean": "rimraf .next/cache/fetch-cache",
    "clean-dev": "run-s clean dev",
    "clean-build": "run-s clean build",
    "clean-start": "run-s clean build start",

※サンプルコードリポジトリも更新しておりますので，お手数ですが最新のものに変更をお願いいたします。

第3章　P.63：本文上から5行目

第5章　P.85：図5-6「投稿写真情報」のDBの名称

第5章　P.91：出力されるログ2行目

PostgreSQL database app-db created at 0.0.0.0:5433

PostgreSQL database app-db created at 127.0.0.1:5433

第7章　P.142：.envファイルのコードブロック最終行

DATABASE_URL="postgresql://root:password@0.0.0.0:5432/app-db?schema=public"

DATABASE_URL="postgresql://root:password@127.0.0.1:5432/app-db?schema=public"

第7章　P.145：docker compose up -dの出力

minio/minio:latest  0.0.0.0:9000-9001->9000-9001/tcp   applications-minio-1
postgres:latest     0.0.0.0:5433->5432/tcp             applications-ps-db-data-1
postgres:latest     0.0.0.0:5432->5432/tcp             applications-ps-db-user-1

minio/minio:latest  127.0.0.1:9000-9001->9000-9001/tcp   applications-minio-1
postgres:latest     127.0.0.1:5433->5432/tcp             applications-ps-db-data-1
postgres:latest     127.0.0.1:5432->5432/tcp             applications-ps-db-user-1

第9章　P.262：見出し

第10章　P.319：見出し

付録　P.340：.envファイルの内容

DATABASE_URL="postgresql://root:password@0.0.0.0:5433/app-db?schema=public"

DATABASE_URL="postgresql://root:password@127.0.0.1:5433/app-db?schema=public"

補足情報

紙面に記載しているNext.jsのバージョンでは一部のサンプルコードがクラッシュする事象がありました。Next.jsのバージョンアップによりこの不具合が解消されたため，下記のサンプルコードリポジトリを更新しております。

• https://github.com/practical-nextjs-book/training
• https://github.com/practical-nextjs-book/applications

すでにサンプルコードがお手元にある場合には，再度ダウンロードするか，package.jsonに記載の"next"および"eslint-config-next"のバージョンを"14.2.2"に変更してください。

また，これに伴って本書の内容も下記の通り訂正させていただきます。

「はじめに」　P.iv：「本書の構成とサンプルコード」

第1章　P.6：コードブロック

// package.json
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.1.0"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.1.0"
  }
}

// package.json
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.2.2"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.2"
  }
}