実践Next.js ——App Routerで進化するWebアプリ開発

サポートページ

 

この記事を読むのに必要な時間：およそ 0.5 分

補足情報

（2024年4月30日更新）

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

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

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

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

誤 関連するパッケージ
next：14.1.0、eslint-config-next：14.1.0、react：18.2.0、react-dom：18.2.0、typescript：5.2.2
正 関連するパッケージ
next：14.2.2、eslint-config-next：14.2.2、react：18.2.0、react-dom：18.2.0、typescript：5.2.2

第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"
  }
}

お詫びと訂正（正誤表）

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

（2024年12月11日最終更新）

第1章　P.2：見出し

誤 creaet-next-appで始めよう
正 create-next-appで始めよう

第1章　P.3：見出し

誤 creaet-next-appの概要
正 create-next-appの概要

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

第1章　P.19：見出し

誤 userRouterを使用したナビゲーション
正 useRouterを使用したナビゲーション

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

誤 
import { useRouter } from "next/router";
正 
import { useRouter } from "next/navigation";

第1章　P.20

誤 すると、次の2つのRouteにかぎり、
正 すると、次の2つのRouteでは、

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

誤 Layoutフィイル
正 Layoutファイル

第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.53 「loading」内のコードブロック1行目

誤 
// training/training-web-4/src/app/loading.tsx
正 
// training/training-web-4/src/app/(site)/photos/loading.tsx

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

誤 表示されつづけけます。
正 表示されつづけます。

第3章　P.66 最初のコードブロック1行目

誤 
// training/packages/training-web-4/src/app/(site)/layout.tsx
正 
// training/packages/training-web-4/src/app/layout.tsx

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

誤 ps-db-user
正 ps-db-data

第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：見出し

誤 Revaliateの設計
正 Revalidateの設計

第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"