Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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

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

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

Kihara, Takuya

June 28, 2023
Tweet

More Decks by Kihara, Takuya

Other Decks in Technology

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. Client Components - v12 までの Client-side Rendering (CSR) - “use

    client” directive を明示的に記載する。 ゆるWeb勉強会@札幌 OnLine #23 #ゆるWeb札幌 10
  8. 主な使い分け ゆる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 の利用 ❌ ✅
  9. Route Handlers - v12 までの API Routes - src/app/api/route.ts を作成

    (パスは api/ 配下にフォルダ追加) - JSON形式で簡単に返せる - フロントエンドのComponentsとファイルツリーが統合されるので、 型の共有といったものがやりやすい。 ゆるWeb勉強会@札幌 OnLine #23 #ゆるWeb札幌 13
  10. まとめ - フロントエンド (page) と API を一体で作成できるフレームワーク。 - Server Components

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