この記事を読むのに必要な時間：およそ 0.5 分
紙面に記載している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"
}
}
|
|---|
お詫びと訂正（正誤表）
本書の以下の部分に誤りがありました。ここに訂正するとともに，ご迷惑をおかけしたことを深くお詫び申し上げます。
第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.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.63：本文上から5行目
| 誤 |
表示されつづけけます。 |
|---|
| 正 |
表示されつづけます。 |
|---|
第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"
|
|---|
