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

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

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

Hiroshi Morishige

April 21, 2023
Tweet

More Decks by Hiroshi Morishige

Other Decks in Technology

Transcript

  1. Serverless Frontend Meetup #2 「Vercel」 自己紹介 2 森茂 洋 /

    Hiroshi Morishige @_himorishige 株式会社microCMS フロントエンドエンジニア 最近の流行りごとはRemix、Qwik、Edge全般 趣味はサイクリングとアイスホッケー、甘いもの全般
  2. 目次 3 • Vercel と Next.js/App Router を利用した開発について • 開発に便利な機能をピックアップして紹介

    ◦ Vercel ◦ Next.js/App Router • まとめ Serverless Frontend Meetup #2 「Vercel」
  3. 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を対象としています
  4. Serverless Frontend Meetup #2 「Vercel」 App Router を採用した理由 6 •

    要件としては事前生成(SSGなど)で運用できる部分が多かった • 一部センシティブな情報をサーバーサイドで処理したかった • サーバーサイドの情報を扱いながらも、 ページ単位ではなく部分的に事前生成の恩恵も享受できるReact Server Componentsの可能 性に惹かれた(ただしserver-onlyの利用は必須) Keeping Server-Only Code out of Client Components (Poisoning)
  5. 目次 7 • Vercel と Next.js/App Router を利用した開発について • 開発に便利な機能をピックアップして紹介

    ◦ Vercel ◦ Next.js/App Router • まとめ Serverless Frontend Meetup #2 「Vercel」
  6. Serverless Frontend Meetup #2 「Vercel」 Deployment Protection 9 • 機能をONにするだけでプレビューURLに認証機能を追加

    • Vercel Authenticationを利用することでVercelアカウントでの認証が可能 • Sharable Linksを利用してVercelアカウントを持たない外部メンバーでも共有可能 • Hobbyプランから利用可能
  7. 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 プロダクション環境に認証機能を付与 ✓
  8. 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を利用するのがよいかもしれない
  9. Serverless Frontend Meetup #2 「Vercel」 Cron Jobs(Beta) 13 • Serverless/Edge

    Functionsを定期的に実行 • Hobbyプランから利用可能 • 集計や通知処理などの軽めなバッチ処理 (処理できる実行時間に注意)
  10. 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
  11. 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プランから利用可能
  12. Serverless Frontend Meetup #2 「Vercel」 Edge Config + Edge Middleware

    17 • Middlewareと連携して様々な場面での利用用途が考えられる(アイデア次第) ◦ フィーチャーフラグ ◦ A/Bテスト ◦ メンテナンスモード ◦ Basic認証 ◦ IP制限 ◦ 環境変数 ◦ などなど メンテナンスモードをEdge Configのフラグで切り分ける例
  13. 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
  14. Serverless Frontend Meetup #2 「Vercel」 20 Comments • プレビューサイトにコメント機能を追加 •

    SlackやLinearとの連携が可能 • Hobbyプランから利用可能 参考:https://vercel.com/docs/concepts/deployments/comments
  15. 目次 21 • Vercel と Next.js/App Router を利用した開発について • 開発に便利な機能をピックアップして紹介

    ◦ Vercel ◦ Next.js/App Router • まとめ Serverless Frontend Meetup #2 「Vercel」
  16. 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)
  17. 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 Add updated app dir cache handling #48516
  18. 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
  19. 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
  20. Serverless Frontend Meetup #2 「Vercel」 Image Generation 31 • Route

    HandlersとImageResponseを利用して OGイメージが簡単に生成、利用できるように • Edge Runtimeのみサポート • バンドルサイズは500KBまで • https://github.com/vercel/satori https://beta.nextjs.org/docs/optimizing/image-generation
  21. 目次 32 • Vercel と Next.js/App Router を利用した開発について • 開発に便利な機能をピックアップして紹介

    ◦ Vercel ◦ Next.js/App Router • まとめ Serverless Frontend Meetup #2 「Vercel」
  22. 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
  23. 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