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
   

   View Slide

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
   好きなフィギュアスケートの技
   スプレッド・イーグル
   

   View Slide

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
   

   View Slide

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
   …
   

   View Slide

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/ へ配置
   ルーティングの仕組みが
   新しいものになっている
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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 の利用 ❌ ✅
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide