講談社サイエンティフィク🖋️📔

講談社サイエンティフィク🖋️📔

@kspub_kodansha

Jun 11

【好評既刊】 ShinCode（進拓海）・著『はじめてのNext.js 　App Routerによるフロントエンド開発の教科書』 🟥🟥AI時代だからこそ確かな基礎を🟥🟥 この一冊で、一人前のNext.jsエンジニアになれる！最新のNext.js 16以降/React 19以降にも対応！ Next.js App Routerの基本的な使い方から実践的な開発パターンまで、Next.jsの強みを最大限に活かす実装をコードと豊富な図解で解説します。著者はチャンネル登録者数8万人の人気YouTubeチャンネル「プログラミングチュートリアル」のShinCode。丁寧で開発者目線の解説がこれまでにないわかりやすさです‼️ はじめて学ぶ人も、一度挫折した人も、環境構築からルーティング、スタイリング、データフェッチ、キャッシュ戦略、レンダリングの仕組み、Server ActionsやSEO対策、デプロイまでどんどん進められます。【目次】第1章　Next.jsの魅⼒　Reactを超える⾼速Web開発の世界へ 1.1　Reactだけではなぜ「速さ」を実現できないのか 1.2　Next.jsは「高速」「安全」「快適な開発」を実現できる　1.2.1　Next.jsは「高速」　1.2.2　Next.jsは「安全」　1.2.3　Next.jsは「快適な開発体験」を提供 1.3　Next.jsとReactは似ている！ 1.4　Next.jsでフロントエンド開発をはじめよう第2章　Next.js開発を始めよう　　環境構築からプロジェクト作成まで 2.1　Next.jsの開発環境を作ろう　2.1.1　コードエディタ　2.1.2　ターミナル　2.1.3　Node.js 　2.1.4　npxコマンドのインストール 2.2　はじめてのNext.jsプロジェクトを立ち上げよう 2.3　プロジェクト構成ファイルを理解しよう Column　便利な拡張機能（プラグイン）を導入しよう第3章　ルーティングとレイアウト　　App Routerで紐解くNext.jsのページ構成の基礎 3.1　ルーティングの基礎　3.1.1　基本のルーティング　3.1.2　ネストされたルーティング 3.2　動的ルーティング　3.2.1　動的ルーティングとは　3.2.2　動的ルーティングによるslugの取得 3.3　layout.tsxによる共通レイアウトの実装　3.3.1　layout.tsxの基本　3.3.2　layout.tsxのパフォーマンスに関する重要なポイント　3.3.3　ネストされたレイアウト 3.4　ファイル規約とコンポーネント階層　3.4.1　error.tsx 　3.4.2　not-found.tsx 　3.4.3　loading.tsx 　3.4.4　route.ts 　3.4.5　middleware.ts 　3.4.6　コンポーネント階層　3.4.7　ネストされたコンポーネント階層 3.5　Route Groups 　3.5.1　Route Groupsとは　3.5.2　Route Groupsを利用した際のlayout.tsxの配置　3.5.3　ルートレイアウトを削除した場合のRoute Groupsのlayout.tsxの挙動 Column　複数のルートレイアウト間の遷移に関する重要な注意点第4章　スタイリング　　Tailwind CSSの基本 4.1　Tailwind CSSとは 4.2　Tailwind CSSの基礎を学ぼう　4.2.1　装飾系：色やテキストスタイルを制御　4.2.2　スペーシング系：余白や間隔を制御 Column　space-x-やspace-y-のユーティリティ　4.2.3　レイアウト系：要素の配置や大きさを制御　4.2.4　レスポンシブ対応：画面サイズに応じたスタイリングを制御 4.3　Tailwind CSSの再利用性を高めよう　4.3.1　コンポーネント分割　4.3.2　＠ applyを利用したCSS設定（利用できるが非推奨） 4.4　美しいUIを提供するUIコンポーネント集　4.4.1　shadcn/ui 　4.4.2　HeroUI（旧NextUI）　4.4.3　Mantine 第5章　クライアントコンポーネントとサーバーコンポーネント 5.1　Webアプリケーションのレンダリング　5.1.1　クライアントサイドレンダリング（CSR）　5.1.2　サーバーサイドレンダリング（SSR：Next.js v12以前やその他のフレームワーク） 5.2　RSC（React Server Components）　5.2.1　RSCとは　5.2.2　コンポーネントツリーで理解するRSCの考え方 5.3　クライアントコンポーネント・サーバーコンポーネントの実装方法と使い分け　5.3.1　クライアントコンポーネントの実装　5.3.2　サーバーコンポーネントの実装　5.3.3　クライアントコンポーネントとサーバーコンポーネントの組み合わせ　5.3.4　クライアントコンポーネントとサーバーコンポーネントの使い分け 5.4　Client Boundary 　5.4.1　Client Boundaryを理解する　5.4.2　コンポジションパターンでClient Boundaryを回避する　5.4.3　コンポジションパターンとその実装例第6章　データフェッチ　　効率的なデータ取得戦略 6.1　データフェッチの基礎　6.1.1　従来のReactにおけるデータフェッチ　6.1.2　Reactを利用する場合は別フレームワークでAPI実装が必要 6.2　サーバーコンポーネントでのデータフェッチ　6.2.1　サーバーコンポーネントでのデータフェッチを推奨　6.2.2　サーバーコンポーネントでのデータフェッチ実装パターン　6.2.3　Next.jsのRoute HandlersでAPI実装　6.2.4　Next.jsで利用するfetch()は標準で拡張されている 6.3　実践的なデータフェッチ手法　6.3.1　ORMを利用したデータフェッチ　6.3.2　並行データフェッチ　6.3.3　自動的に並行データフェッチになる実装例　6.3.4　ストリーミングを活用したデータフェッチ　6.3.5　loading.tsxと<Suspense>の違い Column　なぜコンポーネントを<Suspense>で括るとストリーミングデータフェッチが実現できるの？ 6.4　Data Access Layerを意識したデータフェッチ実装　6.4.1　DALとは　6.4.2　DALを意識したデータフェッチ実装　6.4.3　server-only'パッケージを利用しよう第7章　キャッシュ　　Next.jsで実現する⾼速レスポンス 7.1　キャッシュとは 7.2　Next.js App Routerの4つのキャッシュ機能 7.3　Request Memoization（リクエストのメモ化）　7.3.1　リクエストのメモ化とは　7.3.2　リクエストのメモ化の仕組み　7.3.3　cache()を利用したリクエストのメモ化 7.4　Data Cache（データキャッシュ）　7.4.1　Data Cacheとその仕組み　7.4.2　force-cache'の場合のData Cacheの挙動（SSG）　7.4.3　no-store'の場合のData Cacheの挙動（SSR）　7.4.4　next:{revalidate: 60}の場合のData Cacheの挙動（ISR）　7.4.5　next:{tags:['a']}の場合のData Cacheの挙動（オンデマンド再検証） 7.5　Full Route Cache（フルルートキャッシュ）　7.5.1　Full Route Cacheの仕組み　7.5.2　「RSCペイロード」と「HTML」のキャッシュ 7.6　Router Cache（ルーターキャッシュ）　7.6.1　Router Cacheの仕組み　7.6.2　Router Cacheは<Link>を利用すると機能する　7.6.3　<Link>に付与できるその他プロパティ　7.6.4　Router Cacheのキャッシュ期間をstaleTimesで指定する 7.7　Next.js App Routerにおけるキャッシュの総まとめ 7.8　【Next.js 16】'use cache'時代の到来　7.8.1　キャッシュコンポーネント（Cache Components）を理解しよう　7.8.2　use cache'でキャッシュ設定をしよう　7.8.3　cacheLife()でキャッシュ期間をカスタマイズ　7.8.4　cacheTag()でオンデマンド再検証を実装しよう第8章　レンダリング　　パフォーマンスを最⼤化するレンダリング戦略 8.1　レンダリングとは 8.2　Next.js App Routerの3つのレンダリング戦略 8.3　サーバーコンポーネントを利用したレンダリング（SSG/SSR/ISR） 8.4　ストリーミングと部分的事前レンダリング（Streaming/<Suspense>/PPR）　8.4.1　ストリーミングと<Suspense> 　8.4.2　部分的事前レンダリング（PPR） 8.5　クライアントコンポーネントを利用したレンダリング（useEffect/SWR/TanStack Query）　8.5.1　useEffectを利用したデータフェッチ　8.5.2　SWRを利用したデータフェッチ　8.5.3　TanStack Queryを利用したデータフェッチ 8.6　Next.js App Routerにおけるレンダリング方式の使い分け総まとめ　8.6.1　レンダリング方式選択の判断フロー　8.6.2　SSG（Next.js v13～v16：キャッシュコンポーネント無効）の実装例　8.6.3　SSG（Next.js v16：キャッシュコンポーネント有効）の実装例　8.6.4　SSR（Next.js v13～v16：キャッシュコンポーネント無効）の実装例　8.6.5　SSR（Next.js v16：キャッシュコンポーネント有効）の実装例　8.6.6　ISR（Next.js v13～v16：キャッシュコンポーネント無効）の実装例　8.6.7　ISR（Next.js v16：キャッシュコンポーネント有効）の実装例　8.6.8　SSR Streaming（Next.js v13～v16：キャッシュコンポーネント無効）の実装例　8.6.9　SSR Streaming（Next.js v16：キャッシュコンポーネント）≒PPRの実装例　8.6.10　SSR＋ハイドレーション（Next.js v13～v16：キャッシュコンポーネント無効）の実装例　8.6.11　SSR＋ハイドレーション（Next.js v16：キャッシュコンポーネント有効）の実装例第9章　Server Actions　　フォーム処理の新時代 9.1　なぜ、Server Actionsが必要なのか？ 9.2　Server Actionsを実装してみよう　9.2.1　サーバーコンポーネントでServer Actionsを利用する場合　9.2.2　クライアントコンポーネントでServer Actionsを利用する場合 Column　revalidatePath以外のデータ再検証用の関数は何があるの？　9.2.3　Zodを使ったServer Actionsにおけるバリデーションチェックの実装　9.2.4　<form>以外でも使えるServer Actions 　9.2.5　bind()でServer Actionsに追加の引数を渡せる　9.2.6　redirect()でServer Actions後に画面遷移 9.3　Server Actionsに関連するReact Hooks 　9.3.1　useActionState（旧useFormState）　9.3.2　useFormStatus 　9.3.3　useOptimistic 　9.3.4　<form>以外のServerActionsでuseOptimisticを利用する場合第10章　SEO最適化検索　　エンジンからの評価アップのためのメタデータ戦略 10.1　メタデータとSEO 　10.1.1　メタデータとは　10.1.2　SEOとは 10.2　Next.js App Routerのメタデータ設定方法　10.2.1　静的ページにおけるメタデータ設定　10.2.2　動的ページにおけるメタデータ設定 10.3　SEO最適化のための高度なメタデータ設定　10.3.1　SEO基本設定：robots 　10.3.2　ソーシャルメディア対応：openGraph（OGP）　10.3.3　URL・リンク関連：metadataBase 　10.3.4　視覚要素・デザイン：icons 　10.3.5　表示制御・テンプレート：title.template 10.4　メタデータの評価順序　10.4.1　同じ階層内での優先度　10.4.2　title.templateの特殊な挙動付録A　デプロイメント　　Next.jsアプリを世界へ A.1　Next.jsプロジェクトをVercelへデプロイしよう　A.1.1　GitHubリポジトリの作成　A.1.2　Next.jsプロジェクトをGitHubリポジトリへアップロード　A.1.3　Vercelの初期セットアップと環境変数設定　A.1.4　デプロイボタンを押してビルド・公開 A.2　Vercelデプロイ後の各種おすすめ設定　A.2.1　カスタムドメイン設定　A.2.2　Google Search Console設定　A.2.3　OGP画像表示のチェック A.3　Next.jsプロジェクトのデプロイホスティングサービスの紹介　A.3.1　Vercel（再掲）　A.3.2　Cloudflare Workers（or Pages）　A.3.3　Netlify 　A.3.4　Google Cloud Run（GCP）　A.3.5　AWS（Amplify/App Runner/Lambda API Gatewayなど）　A.3.6　GitHub Pages 　A.3.7　Firebase App Hosting（or Firebase Hosting）　A.3.8　各ホスティングサービスの比較表 Column　フロントエンドとしてのNext.js App Routerの活用・個人開発で利用する技術スタックの紹介

3,432

HeroUI v3 (Previously NextUI) - Beautiful by default, customizable by design.