書籍概要

エンジニア選書

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

著者
発売日
更新日

概要

最新の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のマイグレーションとシーディング

サポート

正誤表

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

(2024年5月9日最終更新)

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

補足情報

(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.2eslint-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"
  }
}

商品一覧