Next.js 13 再入門 (したい) #ゆるWeb札幌

Slide 1

Slide 1 text

NEXT.JS 13 再入門 (したい) ゆるWeb勉強会@札幌 OnLine #23 2023/06/28 tacck (Kihara, Takuya) ゆるWeb勉強会@札幌 OnLine #23 #ゆるWeb札幌 1

Slide 2

Slide 2 text

ゆるWeb勉強会@札幌 OnLine #23 #ゆるWeb札幌 2 木原卓也 Kihara, Takuya / @tacck 生活協同組合コープさっぽろデジタル推進本部システム部 Amplify Japan User Group 運営メンバーゆるWeb勉強会@札幌主催 AWS Community Builder Since Q2 2021 / Category: Front-end Web and Mobile 好きなフィギュアスケートの技スプレッド・イーグル

Slide 3

Slide 3 text

Next.js の進化が激しいので再入門したい - 簡単なところから(再)入門 - 目標 - プロジェクト作成 - App Router でのページ追加の基本 - Server Components (Server-side Rendering (SSR)) - Client Components (Client-side Rendering (CSR)) - Route Handlers (API Routes) ゆるWeb勉強会@札幌 OnLine #23 #ゆるWeb札幌 3

Slide 4

Slide 4 text

プロジェクト作成ゆるWeb勉強会@札幌 OnLine #23 #ゆるWeb札幌 4 $ npx create-next-app@latest ✔ What is your project named? … my-app ✔ Would you like to use TypeScript with this project? … No / Yes ✔ Would you like to use ESLint with this project? … No / Yes ✔ Would you like to use Tailwind CSS with this project? … No / Yes ✔ Would you like to use `src/` directory with this project? … No / Yes ✔ Use App Router (recommended)? … No / Yes ✔ Would you like to customize the default import alias? … No / Yes Creating a new Next.js app in /YOUR_PROJECT_PATH/my-app. Using npm. Initializing project with template: app …

Slide 5

Slide 5 text

プロジェクト作成ゆるWeb勉強会@札幌 OnLine #23 #ゆるWeb札幌 5 $ npx create-next-app@latest ✔ What is your project named? … my-app ✔ Would you like to use TypeScript with this project? … No / Yes ✔ Would you like to use ESLint with this project? … No / Yes ✔ Would you like to use Tailwind CSS with this project? … No / Yes ✔ Would you like to use `src/` directory with this project? … No / Yes ✔ Use App Router (recommended)? … No / Yes ✔ Would you like to customize the default import alias? … No / Yes Creating a new Next.js app in /YOUR_PROJECT_PATH/my-app. Using npm. Initializing project with template: app … TypeScriptが標準 ESLintも入って便利コードを src/ へ配置ルーティングの仕組みが新しいものになっている

Slide 6

Slide 6 text

App Router でのページ追加の基本 - ルーティング機能が v13 で新しくなった (App Router) - About ページを追加する場合 - src/app/about/page.tsx を作成 (src/app/about.tsx ではない) ゆるWeb勉強会@札幌 OnLine #23 #ゆるWeb札幌 6

Slide 7

Slide 7 text

ページ追加ゆるWeb勉強会@札幌 OnLine #23 #ゆるWeb札幌 7

Slide 8

Slide 8 text

画面ゆるWeb勉強会@札幌 OnLine #23 #ゆるWeb札幌 8

Slide 9

Slide 9 text

Server Components - v12 までの Server-side Rendering (SSR) - コンポーネントの標準動作ゆるWeb勉強会@札幌 OnLine #23 #ゆるWeb札幌 9

Slide 10

Slide 10 text

Client Components - v12 までの Client-side Rendering (CSR) - “use client” directive を明示的に記載する。ゆるWeb勉強会@札幌 OnLine #23 #ゆるWeb札幌 10

Slide 11

Slide 11 text

使い分け例ゆるWeb勉強会@札幌 OnLine #23 #ゆるWeb札幌 11 https://nextjs.org/docs/getting-started/react-essentials#thinking-in-server-components

Slide 12

Slide 12 text

主な使い分けゆるWeb勉強会@札幌 OnLine #23 #ゆるWeb札幌 12 https://nextjs.org/docs/getting-started/react-essentials#when-to-use-server-and-client-components 利用目的 Server Component Client Component データのフェッチ ✅ ❌ (直接の)バックエンドリソースへのアクセス ✅ ❌ サーバ上のセンシティブ情報(アクセストークンなど) ✅ ❌ サーバ上の依存の維持 (クライアントサイドのJavaScript削減) ✅ ❌ (onClick()などの)インタラクティブイベントリスナーの追加 ❌ ✅ (useState()などの)状態やライフサイクルの利用 ❌ ✅ ブラウザ用のAPI利用 ❌ ✅ 状態などに依存したカスタムフック ❌ ✅ React Class components の利用 ❌ ✅

Slide 13

Slide 13 text

Route Handlers - v12 までの API Routes - src/app/api/route.ts を作成 (パスは api/ 配下にフォルダ追加) - JSON形式で簡単に返せる - フロントエンドのComponentsとファイルツリーが統合されるので、型の共有といったものがやりやすい。ゆるWeb勉強会@札幌 OnLine #23 #ゆるWeb札幌 13

Slide 14

Slide 14 text

まとめ - フロントエンド (page) と API を一体で作成できるフレームワーク。 - Server Components (SSR) が標準となったことで、「サーバ側で処理する」ことの意識がより強化された印象。 - フロントエンド重視傾向からの揺り戻し感 - 今回試せていない機能も多いので、もっと触ります。ゆるWeb勉強会@札幌 OnLine #23 #ゆるWeb札幌 14

Slide 15

Slide 15 text

END ゆるWeb勉強会@札幌 OnLine #23 #ゆるWeb札幌 15