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

ゆるWeb勉強会@札幌 OnLine #23での発表資料
https://mild-web-sap.connpass.com/event/286813/
https://youtube.com/live/dl_icRmJ-4s

Transcript

1. NEXT.JS 13 再入門 (したい) ゆるWeb勉強会@札幌 OnLine #23 2023/06/28 tacck (Kihara, Takuya) ゆるWeb勉強会@札幌 OnLine #23 #ゆるWeb札幌 1
2. ゆる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 好きなフィギュアスケートの技 スプレッド・イーグル
3. 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
4. プロジェクト作成 ゆる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 …
5. プロジェクト作成 ゆる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/ へ配置 ルーティングの仕組みが 新しいものになっている
6. App Router でのページ追加の基本 - ルーティング機能が v13 で新しくなった (App Router) - About ページを追加する場合 - src/app/about/page.tsx を作成 (src/app/about.tsx ではない) ゆるWeb勉強会@札幌 OnLine #23 #ゆるWeb札幌 6
7. ページ追加 ゆるWeb勉強会@札幌 OnLine #23 #ゆるWeb札幌 7
8. 画面 ゆるWeb勉強会@札幌 OnLine #23 #ゆるWeb札幌 8
9. Server Components - v12 までの Server-side Rendering (SSR) - コンポーネントの標準動作 ゆるWeb勉強会@札幌 OnLine #23 #ゆるWeb札幌 9
10. Client Components - v12 までの Client-side Rendering (CSR) - “use client” directive を明示的に記載する。 ゆるWeb勉強会@札幌 OnLine #23 #ゆるWeb札幌 10
11. 使い分け例 ゆるWeb勉強会@札幌 OnLine #23 #ゆるWeb札幌 11 https://nextjs.org/docs/getting-started/react-essentials#thinking-in-server-components
12. 主な使い分け ゆる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 の利用 ❌ ✅
13. Route Handlers - v12 までの API Routes - src/app/api/route.ts を作成 (パスは api/ 配下にフォルダ追加) - JSON形式で簡単に返せる - フロントエンドのComponentsとファイルツリーが統合されるので、 型の共有といったものがやりやすい。 ゆるWeb勉強会@札幌 OnLine #23 #ゆるWeb札幌 13
14. まとめ - フロントエンド (page) と API を一体で作成できるフレームワーク。 - Server Components (SSR) が標準となったことで、 「サーバ側で処理する」ことの意識がより強化された印象。 - フロントエンド重視傾向からの揺り戻し感 - 今回試せていない機能も多いので、もっと触ります。 ゆるWeb勉強会@札幌 OnLine #23 #ゆるWeb札幌 14
15. END ゆるWeb勉強会@札幌 OnLine #23 #ゆるWeb札幌 15