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

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

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

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

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を対象としています

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

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

Serverless Frontend Meetup #2 「Vercel」 Deployment Protection 8

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

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 プロダクション環境に認証機能を付与 ✓

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を利用するのがよいかもしれない

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

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

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

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

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プランから利用可能

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

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

Serverless Frontend Meetup #2 「Vercel」 Comments 19

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

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

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

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）

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

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

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

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

Serverless Frontend Meetup #2 「Vercel」 Route Handlers 28

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

Serverless Frontend Meetup #2 「Vercel」 Image Generation 30

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

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

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

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

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

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