内容紹介

【最新の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」の概要

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

■著者プロフィール

吉井健文：フロントエンドを専門とするエンジニア。著書として『フロントエンド開発のためのテスト入門』（翔泳社、2023年）、『実践TypeScript』（マイナビ、2019年）があるほか、WEB+DB PRESSへの寄稿なども行う。Twitter: @takepepe