Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

microCMS
April 24, 2023

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

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

microCMS

April 24, 2023
Tweet

More Decks by microCMS

Other Decks in Technology

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