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の 便利な機能たち
2. Serverless Frontend Meetup #2 「Vercel」 自己紹介 2 森茂 洋 / Hiroshi Morishige @_himorishige 株式会社microCMS フロントエンドエンジニア 最近の流行りごとはRemix、Qwik、Edge全般 趣味はサイクリングとアイスホッケー、甘いもの全般
3. 目次 3 • Vercel と Next.js/App Router を利用した開発について • 開発に便利な機能をピックアップして紹介 ◦ Vercel ◦ Next.js/App Router • まとめ Serverless Frontend Meetup #2 「Vercel」
4. Serverless Frontend Meetup #2 「Vercel」 Vercel と Next.js/App Router を 利用した開発について 4
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を対象としています
6. Serverless Frontend Meetup #2 「Vercel」 App Router を採用した理由 6 • 要件としては事前生成（SSGなど）で運用できる部分が多かった • 一部センシティブな情報をサーバーサイドで処理したかった • サーバーサイドの情報を扱いながらも、 ページ単位ではなく部分的に事前生成の恩恵も享受できるReact Server Componentsの可能 性に惹かれた（ただしserver-onlyの利用は必須） Keeping Server-Only Code out of Client Components (Poisoning)
7. 目次 7 • Vercel と Next.js/App Router を利用した開発について • 開発に便利な機能をピックアップして紹介 ◦ Vercel ◦ Next.js/App Router • まとめ Serverless Frontend Meetup #2 「Vercel」
8. Serverless Frontend Meetup #2 「Vercel」 Deployment Protection 8
9. Serverless Frontend Meetup #2 「Vercel」 Deployment Protection 9 • 機能をONにするだけでプレビューURLに認証機能を追加 • Vercel Authenticationを利用することでVercelアカウントでの認証が可能 • Sharable Linksを利用してVercelアカウントを持たない外部メンバーでも共有可能 • Hobbyプランから利用可能
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 プロダクション環境に認証機能を付与 ✓
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を利用するのがよいかもしれない
12. Serverless Frontend Meetup #2 「Vercel」 Cron Jobs (Beta) 12
13. Serverless Frontend Meetup #2 「Vercel」 Cron Jobs(Beta) 13 • Serverless/Edge Functionsを定期的に実行 • Hobbyプランから利用可能 • 集計や通知処理などの軽めなバッチ処理 （処理できる実行時間に注意）
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
15. Serverless Frontend Meetup #2 「Vercel」 Edge Config + Edge Middleware 15
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プランから利用可能
17. Serverless Frontend Meetup #2 「Vercel」 Edge Config + Edge Middleware 17 • Middlewareと連携して様々な場面での利用用途が考えられる（アイデア次第） ◦ フィーチャーフラグ ◦ A/Bテスト ◦ メンテナンスモード ◦ Basic認証 ◦ IP制限 ◦ 環境変数 ◦ などなど メンテナンスモードをEdge Configのフラグで切り分ける例
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
19. Serverless Frontend Meetup #2 「Vercel」 Comments 19
20. Serverless Frontend Meetup #2 「Vercel」 20 Comments • プレビューサイトにコメント機能を追加 • SlackやLinearとの連携が可能 • Hobbyプランから利用可能 参考:https://vercel.com/docs/concepts/deployments/comments
21. 目次 21 • Vercel と Next.js/App Router を利用した開発について • 開発に便利な機能をピックアップして紹介 ◦ Vercel ◦ Next.js/App Router • まとめ Serverless Frontend Meetup #2 「Vercel」
22. Serverless Frontend Meetup #2 「Vercel」 Data Fetching + Cache API 22
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）
24. Serverless Frontend Meetup #2 「Vercel」 Mutating Data + Cache API 24
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
26. Serverless Frontend Meetup #2 「Vercel」 Route Groups, Opt folders out of routing 26
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
28. Serverless Frontend Meetup #2 「Vercel」 Route Handlers 28
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
30. Serverless Frontend Meetup #2 「Vercel」 Image Generation 30
31. Serverless Frontend Meetup #2 「Vercel」 Image Generation 31 • Route HandlersとImageResponseを利用して OGイメージが簡単に生成、利用できるように • Edge Runtimeのみサポート • バンドルサイズは500KBまで https://beta.nextjs.org/docs/optimizing/image-generation
32. 目次 32 • Vercel と Next.js/App Router を利用した開発について • 開発に便利な機能をピックアップして紹介 ◦ Vercel ◦ Next.js/App Router • まとめ Serverless Frontend Meetup #2 「Vercel」
33. Serverless Frontend Meetup #2 「Vercel」 まとめ 33 Vercelをデプロイ先としてしか使わないの はもったいない
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
35. Thanks :) 35 https://discord.gg/K3DPqw4EJ2 @micro_cms https://jobs.microcms.co.jp/
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