Serverless Frontend Meetup #2 「Vercel」での登壇資料です。
Serverless Frontend Meetup#2 「Vercel」森茂 洋Next.jsでの開発を加速させるVercelとNext.js/App Routerの便利な機能たち
View Slide
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 Protection8
Serverless Frontend Meetup #2 「Vercel」Deployment Protection9● 機能をONにするだけでプレビューURLに認証機能を追加● Vercel Authenticationを利用することでVercelアカウントでの認証が可能● Sharable Linksを利用してVercelアカウントを持たない外部メンバーでも共有可能● Hobbyプランから利用可能
Serverless Frontend Meetup #2 「Vercel」Deployment Protection10Enterpriseプランではすべての機能が利用可能参考:https://vercel.com/docs/concepts/deployments/deployment-protection機能 内容 Hobby ProAdvanced DeploymentProtection($150/mo)Vercel Authentication プレビューURLに認証機能を付与(Vercelアカウント) ✓ ✓ ✓Sharable Links(Beta) 外部メンバー用の認証済みリンクを配信 1 Unlimited UnlimitedPassword Protection パスワード認証 ✓Protection Bypass forAutomation(Beta)E2Eテストや外部ツール用に認証をバイパスするためのシークレットを発行 ✓Private ProductionDeploymentsプロダクション環境に認証機能を付与✓
Serverless Frontend Meetup #2 「Vercel」利用時の注意点11● API Route/Route Handlersも含めアプリケーション全体が認証の対象となる● ビルド時も自身(VERCEL_URL)のAPI Route/Route Handlersにアクセスすることができない。SSGやRSCなどPreBuildが必要な環境での利用の際は注意● E2Eや外部SaaSからのアクセスなど柔軟な認証を行うためにはProtection Bypass forAutomation(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)14Beta版のため現在は1プロジェクト20jobsまで参考:https://vercel.com/docs/cron-jobsプラン Job数 設定可能な実行スケジュール実行時間Serverless実行時間EdgeHobby 2 1日1回 10s 30sPro 40 制限なし 60s 30sEnterprise 100 制限なし 900s 30s
Serverless Frontend Meetup #2 「Vercel」Edge Config + Edge Middleware15
Serverless Frontend Meetup #2 「Vercel」Edge Config16● 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 Middleware17● Middlewareと連携して様々な場面での利用用途が考えられる(アイデア次第)○ フィーチャーフラグ○ A/Bテスト○ メンテナンスモード○ Basic認証○ IP制限○ 環境変数○ などなどメンテナンスモードをEdge Configのフラグで切り分ける例
Serverless Frontend Meetup #2 「Vercel」Edge Config18参考:https://vercel.com/docs/concepts/edge-network/edge-configプラン Read Write Store容量 Store数Hobby 50k/mo 250/mo 8KB 1Pro1,000k/mo$3/per 1,000k1000/mo$5/per 50064KB 3Enterprise Custom Custom 512KB 10
Serverless Frontend Meetup #2 「Vercel」Comments19
Serverless Frontend Meetup #2 「Vercel」20Comments● プレビューサイトにコメント機能を追加● 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 API22
Serverless Frontend Meetup #2 「Vercel」Data Fetching + Cache API23● 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 API24
Serverless Frontend Meetup #2 「Vercel」Mutating Data + Cache API25● 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 routing26
Serverless Frontend Meetup #2 「Vercel」Route Groups, Opt folders out of routing27● (dashboard)のように()で囲んだディレクトリはルーティングのURLパスから除外される● _utilsのように_を付与したディレクトリはルーティングから除外される● Route Groupsを使い機能グループごとにディレクトリを分けることでColocationを意識したディレクトリ構成が実現できる/application/dashboardhttps://beta.nextjs.org/docs/routing/defining-routes
Serverless Frontend Meetup #2 「Vercel」Route Handlers28
Serverless Frontend Meetup #2 「Vercel」Route Handlers29● 従来の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 Generation30
Serverless Frontend Meetup #2 「Vercel」Image Generation31● 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」まとめ33Vercelをデプロイ先としてしか使わないのはもったいない
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 :)35https://discord.gg/K3DPqw4EJ2@micro_cmshttps://jobs.microcms.co.jp/
Serverless Frontend Meetup #2 「Vercel」参考資料・リンク36● Deployment Protection | Vercel Docshttps://vercel.com/docs/concepts/deployments/deployment-protection● Cron Jobs | Vercel Docshttps://vercel.com/docs/cron-jobs● Vercel Edge Config | Vercel Docshttps://vercel.com/docs/concepts/edge-network/edge-config● Comments Overview | Vercel Docshttps://vercel.com/docs/concepts/deployments/comments● Getting Started | Next.jshttps://beta.nextjs.org/docs/getting-started● Vercel Edge Config is now generally available – Vercelhttps://vercel.com/blog/vercel-edge-config-is-now-generally-available● Vercel Cache API: A progressive cache, integrated with Next.js – Vercelhttps://vercel.com/blog/vercel-cache-api-nextjs-cache● Vercel Web Analytics is now generally available – Vercelhttps://vercel.com/blog/vercel-web-analytics-is-now-generally-available