Next.jsでの開発を加速させるVercelとNext.js/App Routerの便利な機能たち

Serverless Frontend Meetup #2 「Vercel」での登壇資料です。

Transcript

1. Serverless Frontend Meetup
   #2 「Vercel」
   森茂 洋
   Next.jsでの開発を加速させる
   VercelとNext.js/App Routerの
   便利な機能たち
   

   View Slide

2. Serverless Frontend Meetup #2 「Vercel」
   自己紹介
   2
   森茂 洋 / Hiroshi Morishige
   @_himorishige
   株式会社microCMS フロントエンドエンジニア
   最近の流行りごとはRemix、Qwik、Edge全般
   趣味はサイクリングとアイスホッケー、甘いもの全般
   

   View Slide

3. 目次
   3
   ● Vercel と Next.js/App Router を利用した開発について
   ● 開発に便利な機能をピックアップして紹介
   ○ Vercel
   ○ Next.js/App Router
   ● まとめ
   Serverless Frontend Meetup #2 「Vercel」
   

   View Slide

4. Serverless Frontend Meetup #2 「Vercel」
   Vercel と Next.js/App Router を
   利用した開発について
   4
   

   View Slide

5. Serverless Frontend Meetup #2 「Vercel」
   Vercel と Next.js/App Router を利用した開発
   について
   5
   ● Reactベースとしたフルスタックフレーム
   ワーク https://nextjs.org/
   ● Vercel Pro Planを利用
   ● Next.js/App Routerを利用した開発
   ● 23年4月22日時点で利用できるVercelの機能
   とNext.js v13.3.0を対象としています
   

   View Slide

6. Serverless Frontend Meetup #2 「Vercel」
   App Router を採用した理由
   6
   ● 要件としては事前生成（SSGなど）で運用できる部分が多かった
   ● 一部センシティブな情報をサーバーサイドで処理したかった
   ● サーバーサイドの情報を扱いながらも、
   ページ単位ではなく部分的に事前生成の恩恵も享受できるReact Server Componentsの可能
   性に惹かれた（ただしserver-onlyの利用は必須）
   Keeping Server-Only Code out of Client Components (Poisoning)
   

   View Slide

7. 目次
   7
   ● Vercel と Next.js/App Router を利用した開発について
   ● 開発に便利な機能をピックアップして紹介
   ○ Vercel
   ○ Next.js/App Router
   ● まとめ
   Serverless Frontend Meetup #2 「Vercel」
   

   View Slide

8. Serverless Frontend Meetup #2 「Vercel」
   Deployment Protection
   8
   

   View Slide

9. Serverless Frontend Meetup #2 「Vercel」
   Deployment Protection
   9
   ● 機能をONにするだけでプレビューURLに認証機能を追加
   ● Vercel Authenticationを利用することでVercelアカウントでの認証が可能
   ● Sharable Linksを利用してVercelアカウントを持たない外部メンバーでも共有可能
   ● Hobbyプランから利用可能
   

   View Slide

10. Serverless Frontend Meetup #2 「Vercel」
    Deployment Protection
    10
    Enterpriseプランではすべての機能が利用可能
    参考:https://vercel.com/docs/concepts/deployments/deployment-protection
    機能 内容 Hobby Pro
    Advanced Deployment
    Protection($150/mo)
    Vercel Authentication プレビューURLに認証機能を付与（
    Vercelアカウント） ✓ ✓ ✓
    Sharable Links(Beta) 外部メンバー用の認証済みリンクを配信 1 Unlimited Unlimited
    Password Protection パスワード認証 ✓
    Protection Bypass for
    Automation(Beta)
    E2Eテストや外部ツール用に認証をバイパスするためのシー
    クレットを発行 ✓
    Private Production
    Deployments
    プロダクション環境に認証機能を付与
    ✓
    

    View Slide

11. Serverless Frontend Meetup #2 「Vercel」
    利用時の注意点
    11
    ● API Route/Route Handlersも含めアプリケーション全体が認証の対象となる
    ● ビルド時も自身（VERCEL_URL）のAPI Route/Route Handlersにアクセスすることがで
    きない。SSGやRSCなどPreBuildが必要な環境での利用の際は注意
    ● E2Eや外部SaaSからのアクセスなど柔軟な認証を行うためにはProtection Bypass for
    Automation(Beta)-$150/moが必要
    ● 利便性や柔軟性を考えるとMiddlewareを利用するのがよいかもしれない
    

    View Slide

12. Serverless Frontend Meetup #2 「Vercel」
    Cron Jobs (Beta)
    12
    

    View Slide

13. Serverless Frontend Meetup #2 「Vercel」
    Cron Jobs(Beta)
    13
    ● Serverless/Edge Functionsを定期的に実行
    ● Hobbyプランから利用可能
    ● 集計や通知処理などの軽めなバッチ処理
    （処理できる実行時間に注意）
    

    View Slide

14. Serverless Frontend Meetup #2 「Vercel」
    Cron Jobs(Beta)
    14
    Beta版のため現在は1プロジェクト20jobsまで
    参考:https://vercel.com/docs/cron-jobs
    プラン Job数 設定可能な実行スケジュール
    実行時間
    Serverless
    実行時間
    Edge
    Hobby 2 1日1回 10s 30s
    Pro 40 制限なし 60s 30s
    Enterprise 100 制限なし 900s 30s
    

    View Slide

15. Serverless Frontend Meetup #2 「Vercel」
    Edge Config + Edge Middleware
    15
    

    View Slide

16. Serverless Frontend Meetup #2 「Vercel」
    Edge Config
    16
    ● Vercelのプロジェクトごとに紐付けて利用できるデータストア
    ● 2023/4/6にGAとなったばかり
    Vercel Edge Config is now generally available
    ● SDKを利用してKey-Value型のストアとしてデータの取得が可能
    ● 主にEdge Middlewareとの連携で活躍
    ● Vercelのダッシュボードから動的に編集可能
    ● 名称はEdgeとあるがブラウザ、Node.js環境からもアクセス可能
    ● Hobbyプランから利用可能
    

    View Slide

17. Serverless Frontend Meetup #2 「Vercel」
    Edge Config + Edge Middleware
    17
    ● Middlewareと連携して様々な場面での利用用途が考えられる（アイデア次第）
    ○ フィーチャーフラグ
    ○ A/Bテスト
    ○ メンテナンスモード
    ○ Basic認証
    ○ IP制限
    ○ 環境変数
    ○ などなど
    メンテナンスモードをEdge Configのフラグで切り分ける例
    

    View Slide

18. Serverless Frontend Meetup #2 「Vercel」
    Edge Config
    18
    参考:https://vercel.com/docs/concepts/edge-network/edge-config
    プラン Read Write Store容量 Store数
    Hobby 50k/mo 250/mo 8KB 1
    Pro
    1,000k/mo
    $3/per 1,000k
    1000/mo
    $5/per 500
    64KB 3
    Enterprise Custom Custom 512KB 10
    

    View Slide

19. Serverless Frontend Meetup #2 「Vercel」
    Comments
    19
    

    View Slide

20. Serverless Frontend Meetup #2 「Vercel」
    20
    Comments
    ● プレビューサイトにコメント機能を追加
    ● SlackやLinearとの連携が可能
    ● Hobbyプランから利用可能
    参考:https://vercel.com/docs/concepts/deployments/comments
    

    View Slide

21. 目次
    21
    ● Vercel と Next.js/App Router を利用した開発について
    ● 開発に便利な機能をピックアップして紹介
    ○ Vercel
    ○ Next.js/App Router
    ● まとめ
    Serverless Frontend Meetup #2 「Vercel」
    

    View Slide

22. Serverless Frontend Meetup #2 「Vercel」
    Data Fetching + Cache API
    22
    

    View Slide

23. Serverless Frontend Meetup #2 「Vercel」
    Data Fetching + Cache API
    23
    ● React Server Componentsの採用でコンポーネントレベルでのData Fetchingが可能に
    なった。
    ● さまざまなData Fetchingパターンが実現可能に
    ○ Prallell/Sequential、Streaming/Blocking、などなど
    ● Cache API(Beta)によりセグメント単位でのCaching/Revalidateが利用可能に（Beta期
    間は最大1MB）
    

    View Slide

24. Serverless Frontend Meetup #2 「Vercel」
    Mutating Data + Cache API
    24
    

    View Slide

25. Serverless Frontend Meetup #2 「Vercel」
    Mutating Data + Cache API
    25
    ● Mutating Data周りについて、ユーザーのアクションをトリガーとしたい場合、
    現状はrouter.refesh()のみ
    ● revalidatePath()やrevalidateTag()が計画されているようなので期待
    Vercel Cache API: A progressive cache, integrated with Next.js
    

    View Slide

26. Serverless Frontend Meetup #2 「Vercel」
    Route Groups,
    Opt folders out of routing
    26
    

    View Slide

27. Serverless Frontend Meetup #2 「Vercel」
    Route Groups, Opt folders out of routing
    27
    ● (dashboard)のように()で囲んだディレクトリは
    ルーティングのURLパスから除外される
    ● _utilsのように_を付与したディレクトリはルー
    ティングから除外される
    ● Route Groupsを使い機能グループごとにディレク
    トリを分けることでColocationを意識したディレ
    クトリ構成が実現できる
    /application
    /dashboard
    https://beta.nextjs.org/docs/routing/defining-routes
    

    View Slide

28. Serverless Frontend Meetup #2 「Vercel」
    Route Handlers
    28
    

    View Slide

29. Serverless Frontend Meetup #2 「Vercel」
    Route Handlers
    29
    ● 従来のAPI Routesでは/pages/apiディレクトリでしか動作できなかったが、
    App Directory下ではRoute Handlersとしてどのディレクトリでも利用できるように
    ● Web標準のRequest/Response APIが利用できるように（一部Next.js独自拡張あり）
    Vercel Next.js Beta docsより引用
    https://beta.nextjs.org/docs/routing/route-handlers
    

    View Slide

30. Serverless Frontend Meetup #2 「Vercel」
    Image Generation
    30
    

    View Slide

31. Serverless Frontend Meetup #2 「Vercel」
    Image Generation
    31
    ● Route HandlersとImageResponseを利用して
    OGイメージが簡単に生成、利用できるように
    ● Edge Runtimeのみサポート
    ● バンドルサイズは500KBまで
    https://beta.nextjs.org/docs/optimizing/image-generation
    

    View Slide

32. 目次
    32
    ● Vercel と Next.js/App Router を利用した開発について
    ● 開発に便利な機能をピックアップして紹介
    ○ Vercel
    ○ Next.js/App Router
    ● まとめ
    Serverless Frontend Meetup #2 「Vercel」
    

    View Slide

33. Serverless Frontend Meetup #2 「Vercel」
    まとめ
    33
    Vercelをデプロイ先としてしか使わないの
    はもったいない
    

    View Slide

34. Serverless Frontend Meetup #2 「Vercel」
    まとめ
    34
    ● Vercelをデプロイ先としてしか使わないのはもったいない
    ○ Proプラン以上を使うなら機能を知って使い尽くすべき
    ○ 開発だけでなく運用・オブザーバビリティ面も含めVercelはどんどん進化している
    ■ Monitoring/Runtime Logs/Audit Logs/Activity Logs/Log Drains
    ■ Web AnalitycsがGA（23/04/19）
    Vercel Web Analytics is now generally available
    ○ App Routerの登場とともに、
    あらためてNext.jsとVercelとの親和性は高い（MiddlewareとCacheAPI）
    ● 5/1-5のSpecial launch eventが楽しみ
    https://vercel.com/ship
    

    View Slide

35. Thanks :)
    35
    https://discord.gg/K3DPqw4EJ2
    @micro_cms
    https://jobs.microcms.co.jp/
    

    View Slide

36. Serverless Frontend Meetup #2 「Vercel」
    参考資料・リンク
    36
    ● Deployment Protection | Vercel Docs
    https://vercel.com/docs/concepts/deployments/deployment-protection
    ● Cron Jobs | Vercel Docs
    https://vercel.com/docs/cron-jobs
    ● Vercel Edge Config | Vercel Docs
    https://vercel.com/docs/concepts/edge-network/edge-config
    ● Comments Overview | Vercel Docs
    https://vercel.com/docs/concepts/deployments/comments
    ● Getting Started | Next.js
    https://beta.nextjs.org/docs/getting-started
    ● Vercel Edge Config is now generally available – Vercel
    https://vercel.com/blog/vercel-edge-config-is-now-generally-available
    ● Vercel Cache API: A progressive cache, integrated with Next.js – Vercel
    https://vercel.com/blog/vercel-cache-api-nextjs-cache
    ● Vercel Web Analytics is now generally available – Vercel
    https://vercel.com/blog/vercel-web-analytics-is-now-generally-available
    

    View Slide