概要
最新の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:見出し
誤 |
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ファイル |
第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"
|