SlideShare a Scribd company logo
Production Experience:
Some Insights from Using Vercel and
Next.js for Over 3 Years
MATANO Kosuke
MATANO Kosuke
• I joined CyberAgent, Inc. in 2020.
• Since I joined the company, I have been in
charge of the web front-end lead engineer for
a new business.
• I am currently developing FANBASE ARENA.
• I have been using Next.js and Vercel for over
three years.
@matamatanot
My First Pull Request
github.com/vercel/next.js/pull/8396
Publish a Article About gSSP methods
https://qiita.com/matamatanot/items/1735984f40540b8bdf91
https://twitter.com/chibicode/status/1237150475088056320
Invoices (our plan is Pro even now)
vercel.com/teams/:teamName/settings/invoices
Edited to conceal prices
1. Introducing “FANBASE ARENA”
2. Address the limit on the number of projects
3. Maintenance mode
4. Reviewing the Three Years and Looking to the Future
Introducing
“FANBASE ARENA”
Production Experience: Some Insights from Using Vercel and Next.js for Over 3 Years
“FANBASE ARENA” is a
agnostic entertainment platform
solution.
Main Features
Live Streaming
Video on demand
and Per Per View
Community Members card
• Artists can easily get started with live
streaming.
• In addition to Real-time chat, polls and
surveys for artists to gather feedback from
their audience.
• Collaborative streaming allows multiple
artists to perform together in real time,
regardless of where located.
• Video on Demand (VOD) and Pay Per View
(PPV) are available.
High Customizability
• High customizability allows artists to customize the user interface and
choose which features to enable.
• The sites created using our solution each have their own domain.
• As developers, we needed a design that allowed us to develop
independently.
Address the limit on the
number of projects
Three Next.js Applications per service
For Administrators For Artists For Users
appDir: true
appDir: true
The maximum number of projects was 10
• If we operate more than three services, we will reach the limit.
10 (projects) / 3 (Next.js application) = 3 (services)
https://web.archive.org/web/20210925100140/https://vercel.com/docs/concepts/limits/overview
For Admin and Artists applications are managed in one project.
10 (projects) - 2 (Admin and Artists) = 8 (services)
`-dev` and `-prd` branches
• Prepare Dev and Prd branches for each
service.
• Synchronize `-dev` automatically with develop
and `-prd` manually by running github actions.
• Branches
•develop
•service1-dev
•service1-prd
•service2-dev
•service2-prd
Preview Environment Variables and branch-speci
fi
c variables
• "Set API_KEY and API_BASE_URL
for each environment.
• X_API_KEY is set for all Previews,
as it is used commonly.
• Caution: The value of
VERCEL_ENV will always be
`preview`, even in the ‘-prd'
environment.
Manually registering environment variables was so frustrating 😩
• In reality, more environment variables would be registered.
• There were bugs caused by including line breaks or spaces.
twitter.com/leeerob/status/1593331366292250625
Production Experience: Some Insights from Using Vercel and Next.js for Over 3 Years
Unexpected and delightful change!
😲
The maximum number of projects is 60
60 (projects) / 3 (Next.js application) = 20 (services)
https://vercel.com/docs/concepts/limits/overview
• Fewer than 20 services are in operation, so the limit is unlikely to be
reached any time soon.
• If the same repository is connected, the Ignore Build setting is
necessary because builds will be performed every time a commit is
pushed.
Maintenance mode
If a problems occurs, it is necessary to switch to maintenance mode.
• All path requests will be redirected to the '/maintenance' page,
indicating that the service is under maintenance.
• Need to fetch a static asset to check whether the system is in
maintenance mode.
• As this is rare, we want to avoid unnecessary network traf
fi
c.
First: Promote to Production
• "Promote to Production" did not meet
the requirements because this
involves rebuilding the entire
application, which is a slower process
and would consume some time.
https://vercel.com/docs/concepts/deployments/managing-deployments#promote-deployment-to-production
Second: In _app.tsx
• In app.tsx, the maintenance status
periodically is fetched and if it is in
maintenance mode, redirects the
user to ` /maintenance ` .
• Bad point: The amount of user
traf
fi
c increases.
Third: middleware and edge con
fi
g
• Since it is resolved at the
edge side, the user
experience is almost
unchanged.
• Bad point: Applying
middleware to all paths
would make checking too
frequent.
Ref: https://github.com/vercel/examples/tree/main/edge-middleware/maintenance-page
Conclusion: Instant Rollback (Beta)
“the Instant Rollback is a relatively
faster process since it involves
assigning domains to an existing
deployment rather than a complete
rebuild.”
• We plan to automate the process
using Vercel CLI once it is
of
fi
cially(not beta) released.
https://vercel.com/changelog/instant-rollback-public-beta-available-to-revert-deployments
Constraints
“Deployments that have never been aliased
to production a domain, e.g., most Preview
Deployments, are not eligible. ”
• We must
fi
rst deploy the application to
production in maintenance mode.
• Maintenance Mode for Future Maintenance
Mode 🤔
Ref: https://vercel.com/docs/concepts/deployments/instant-rollback
Reviewing the Three Years
and Looking to the Future
We made a good decision by choosing Vercel and Next.js
• Vercel and Next.js were great even 3 years ago, but as we have seen so
far, there have been a few things missing.
• Recently, various new features have been rapidly added and they have
been evolving.
• There are many things I am excited about, including AppDir, Route
Handler, Edge computing, Metadata, Typed link, Turborepo, Turbopack,
and more.
Thank you for your attention

More Related Content

What's hot (20)

PDF
Why Should we use Microsoft's Playwright
Knoldus Inc.
 
PPTX
Software engineering project management
jhudyne
 
PPTX
Ch18 service oriented software engineering
software-engineering-book
 
PPTX
Bounty Craft: Bug bounty reports how do they work, @sushihack presents at Nu...
HackerOne
 
PPTX
Software Testing and Quality Assurance (Error, Bug, Fault)
Yogesh Late
 
PPT
Software Quality Management
Krishna Sujeer
 
PPTX
Scrum Framework
Upekha Vandebona
 
PDF
Bug bounty null_owasp_2k17
Sagar M Parmar
 
PDF
Develop QNAP NAS App by Docker
Terry Chen
 
PPT
Web Application Security Testing
Marco Morana
 
PDF
5 Key Steps To Implementing Micro Frontends On Kubernetes
Entando
 
PPTX
Deep understanding on Cross-Site Scripting and SQL Injection
Vishal Kumar
 
PPT
Performance testing with Jmeter
Prashanth Kumar
 
PPT
Scrum retrospective
Priyanka Rana
 
PPTX
Scrum Training (One Day)
beLithe
 
PPT
Software testing
suneeth kumar
 
PDF
Secure coding guidelines
Zakaria SMAHI
 
PPTX
Ch23 project planning
software-engineering-book
 
PDF
SRE From Scratch
Grier Johnson
 
PPTX
Network solutions presentation
sabrinacummings
 
Why Should we use Microsoft's Playwright
Knoldus Inc.
 
Software engineering project management
jhudyne
 
Ch18 service oriented software engineering
software-engineering-book
 
Bounty Craft: Bug bounty reports how do they work, @sushihack presents at Nu...
HackerOne
 
Software Testing and Quality Assurance (Error, Bug, Fault)
Yogesh Late
 
Software Quality Management
Krishna Sujeer
 
Scrum Framework
Upekha Vandebona
 
Bug bounty null_owasp_2k17
Sagar M Parmar
 
Develop QNAP NAS App by Docker
Terry Chen
 
Web Application Security Testing
Marco Morana
 
5 Key Steps To Implementing Micro Frontends On Kubernetes
Entando
 
Deep understanding on Cross-Site Scripting and SQL Injection
Vishal Kumar
 
Performance testing with Jmeter
Prashanth Kumar
 
Scrum retrospective
Priyanka Rana
 
Scrum Training (One Day)
beLithe
 
Software testing
suneeth kumar
 
Secure coding guidelines
Zakaria SMAHI
 
Ch23 project planning
software-engineering-book
 
SRE From Scratch
Grier Johnson
 
Network solutions presentation
sabrinacummings
 

Similar to Production Experience: Some Insights from Using Vercel and Next.js for Over 3 Years (20)

PDF
A Comprehensive Guide to Hosting Next.js on Vercel
Shiv Technolabs Pvt. Ltd.
 
PDF
Building and Deploying Serverless Applications with NextJS and Vercel.pdf
RajasreePothula3
 
PPTX
Full-stack App in half a Day: Next.js 15 Development Bootcamp
Maurice De Beijer [MVP]
 
PPTX
Getting started with Next.js - IM Tech Meetup - Oct 2022.pptx
Ilesh Mistry
 
PPTX
Next.js vs React | what to choose for frontend development_
ForceBolt
 
PPTX
Scality S3 Server: Node js Meetup Presentation
Scality
 
PDF
Go Pro, Inc. Case Study: Dive into the details of our node.js applications
Andrew Maxwell
 
PDF
Introduction to react native
Dani Akash
 
PPTX
GDG Morgantown, WV: Write code you can depend on!
Logan Spears
 
PDF
I Just Want to Run My Code: Waypoint, Nomad, and Other Things
Michael Lange
 
PDF
Workshop "Building Decentralised Chat with Next.js", Oleh Melnychuk
Fwdays
 
PDF
Next.js with drupal, the good parts
Taller Negócio Digitais
 
PDF
Redundant devops
Szabolcs Szabolcsi-Tóth
 
PDF
GoPro, Inc. Case study: Dive into the details of our web applications
Andrew Maxwell
 
PPT
Ferrara Linux Day 2011
Gianluca Padovani
 
PDF
Aura LA GDG - July 17-2017
Kristan Uccello
 
PPTX
Developing Client-side Application using Visual Studio Code and Nodejs
Rajesh Gunasundaram
 
PDF
Full Stack Serverless 1st Edition Nader Dabit
ibokocazim
 
KEY
Practical Use of MongoDB for Node.js
async_io
 
PDF
ReactJS Development Services for Advanced Web Development
SynapseIndia
 
A Comprehensive Guide to Hosting Next.js on Vercel
Shiv Technolabs Pvt. Ltd.
 
Building and Deploying Serverless Applications with NextJS and Vercel.pdf
RajasreePothula3
 
Full-stack App in half a Day: Next.js 15 Development Bootcamp
Maurice De Beijer [MVP]
 
Getting started with Next.js - IM Tech Meetup - Oct 2022.pptx
Ilesh Mistry
 
Next.js vs React | what to choose for frontend development_
ForceBolt
 
Scality S3 Server: Node js Meetup Presentation
Scality
 
Go Pro, Inc. Case Study: Dive into the details of our node.js applications
Andrew Maxwell
 
Introduction to react native
Dani Akash
 
GDG Morgantown, WV: Write code you can depend on!
Logan Spears
 
I Just Want to Run My Code: Waypoint, Nomad, and Other Things
Michael Lange
 
Workshop "Building Decentralised Chat with Next.js", Oleh Melnychuk
Fwdays
 
Next.js with drupal, the good parts
Taller Negócio Digitais
 
Redundant devops
Szabolcs Szabolcsi-Tóth
 
GoPro, Inc. Case study: Dive into the details of our web applications
Andrew Maxwell
 
Ferrara Linux Day 2011
Gianluca Padovani
 
Aura LA GDG - July 17-2017
Kristan Uccello
 
Developing Client-side Application using Visual Studio Code and Nodejs
Rajesh Gunasundaram
 
Full Stack Serverless 1st Edition Nader Dabit
ibokocazim
 
Practical Use of MongoDB for Node.js
async_io
 
ReactJS Development Services for Advanced Web Development
SynapseIndia
 
Ad

Recently uploaded (20)

PDF
Comparative Analysis of the Use of Iron Ore Concentrate with Different Binder...
msejjournal
 
PDF
Web Technologies - Chapter 3 of Front end path.pdf
reemaaliasker
 
PDF
13th International Conference of Networks and Communications (NC 2025)
JohannesPaulides
 
PPTX
UNIT III CONTROL OF PARTICULATE CONTAMINANTS
sundharamm
 
PPTX
Water resources Engineering GIS KRT.pptx
Krunal Thanki
 
PDF
Introduction to Robotics Mechanics and Control 4th Edition by John J. Craig S...
solutionsmanual3
 
PDF
1_ISO Certifications by Indian Industrial Standards Organisation.pdf
muhammad2010960
 
PDF
July 2025 - Top 10 Read Articles in Network Security & Its Applications.pdf
IJNSA Journal
 
PDF
MRI Tool Kit E2I0500BC Plus Presentation
Ing. Ph. J. Daum GmbH & Co. KG
 
PPTX
MULTI LEVEL DATA TRACKING USING COOJA.pptx
dollysharma12ab
 
PDF
Geothermal Heat Pump ppt-SHRESTH S KOKNE
SHRESTHKOKNE
 
PDF
LEARNING CROSS-LINGUAL WORD EMBEDDINGS WITH UNIVERSAL CONCEPTS
kjim477n
 
PDF
IEEE EMBC 2025 「Improving electrolaryngeal speech enhancement via a represent...
NU_I_TODALAB
 
PPTX
00-ClimateChangeImpactCIAProcess_PPTon23.12.2024-ByDr.VijayanGurumurthyIyer1....
praz3
 
PDF
Non Text Magic Studio Magic Design for Presentations L&P.pdf
rajpal7872
 
PDF
3.-Differential-Calculus-Part-2-NOTES.pdf
KurtMarbinCalicdan1
 
PDF
CFM 56-7B - Engine General Familiarization. PDF
Gianluca Foro
 
PDF
An Evaluative Study on Performance Growth Plan of ICICI Mutual Fund and SBI M...
PoonamKilaniya
 
PDF
Jual GPS Geodetik CHCNAV i93 IMU-RTK Lanjutan dengan Survei Visual
Budi Minds
 
PDF
勉強会資料_An Image is Worth More Than 16x16 Patches
NABLAS株式会社
 
Comparative Analysis of the Use of Iron Ore Concentrate with Different Binder...
msejjournal
 
Web Technologies - Chapter 3 of Front end path.pdf
reemaaliasker
 
13th International Conference of Networks and Communications (NC 2025)
JohannesPaulides
 
UNIT III CONTROL OF PARTICULATE CONTAMINANTS
sundharamm
 
Water resources Engineering GIS KRT.pptx
Krunal Thanki
 
Introduction to Robotics Mechanics and Control 4th Edition by John J. Craig S...
solutionsmanual3
 
1_ISO Certifications by Indian Industrial Standards Organisation.pdf
muhammad2010960
 
July 2025 - Top 10 Read Articles in Network Security & Its Applications.pdf
IJNSA Journal
 
MRI Tool Kit E2I0500BC Plus Presentation
Ing. Ph. J. Daum GmbH & Co. KG
 
MULTI LEVEL DATA TRACKING USING COOJA.pptx
dollysharma12ab
 
Geothermal Heat Pump ppt-SHRESTH S KOKNE
SHRESTHKOKNE
 
LEARNING CROSS-LINGUAL WORD EMBEDDINGS WITH UNIVERSAL CONCEPTS
kjim477n
 
IEEE EMBC 2025 「Improving electrolaryngeal speech enhancement via a represent...
NU_I_TODALAB
 
00-ClimateChangeImpactCIAProcess_PPTon23.12.2024-ByDr.VijayanGurumurthyIyer1....
praz3
 
Non Text Magic Studio Magic Design for Presentations L&P.pdf
rajpal7872
 
3.-Differential-Calculus-Part-2-NOTES.pdf
KurtMarbinCalicdan1
 
CFM 56-7B - Engine General Familiarization. PDF
Gianluca Foro
 
An Evaluative Study on Performance Growth Plan of ICICI Mutual Fund and SBI M...
PoonamKilaniya
 
Jual GPS Geodetik CHCNAV i93 IMU-RTK Lanjutan dengan Survei Visual
Budi Minds
 
勉強会資料_An Image is Worth More Than 16x16 Patches
NABLAS株式会社
 
Ad

Production Experience: Some Insights from Using Vercel and Next.js for Over 3 Years

  • 1. Production Experience: Some Insights from Using Vercel and Next.js for Over 3 Years MATANO Kosuke
  • 2. MATANO Kosuke • I joined CyberAgent, Inc. in 2020. • Since I joined the company, I have been in charge of the web front-end lead engineer for a new business. • I am currently developing FANBASE ARENA. • I have been using Next.js and Vercel for over three years. @matamatanot
  • 3. My First Pull Request github.com/vercel/next.js/pull/8396
  • 4. Publish a Article About gSSP methods https://qiita.com/matamatanot/items/1735984f40540b8bdf91 https://twitter.com/chibicode/status/1237150475088056320
  • 5. Invoices (our plan is Pro even now) vercel.com/teams/:teamName/settings/invoices Edited to conceal prices
  • 6. 1. Introducing “FANBASE ARENA” 2. Address the limit on the number of projects 3. Maintenance mode 4. Reviewing the Three Years and Looking to the Future
  • 9. “FANBASE ARENA” is a agnostic entertainment platform solution.
  • 10. Main Features Live Streaming Video on demand and Per Per View Community Members card • Artists can easily get started with live streaming. • In addition to Real-time chat, polls and surveys for artists to gather feedback from their audience. • Collaborative streaming allows multiple artists to perform together in real time, regardless of where located. • Video on Demand (VOD) and Pay Per View (PPV) are available.
  • 11. High Customizability • High customizability allows artists to customize the user interface and choose which features to enable. • The sites created using our solution each have their own domain. • As developers, we needed a design that allowed us to develop independently.
  • 12. Address the limit on the number of projects
  • 13. Three Next.js Applications per service For Administrators For Artists For Users appDir: true appDir: true
  • 14. The maximum number of projects was 10 • If we operate more than three services, we will reach the limit. 10 (projects) / 3 (Next.js application) = 3 (services) https://web.archive.org/web/20210925100140/https://vercel.com/docs/concepts/limits/overview
  • 15. For Admin and Artists applications are managed in one project. 10 (projects) - 2 (Admin and Artists) = 8 (services)
  • 16. `-dev` and `-prd` branches • Prepare Dev and Prd branches for each service. • Synchronize `-dev` automatically with develop and `-prd` manually by running github actions. • Branches •develop •service1-dev •service1-prd •service2-dev •service2-prd
  • 17. Preview Environment Variables and branch-speci fi c variables • "Set API_KEY and API_BASE_URL for each environment. • X_API_KEY is set for all Previews, as it is used commonly. • Caution: The value of VERCEL_ENV will always be `preview`, even in the ‘-prd' environment.
  • 18. Manually registering environment variables was so frustrating 😩 • In reality, more environment variables would be registered. • There were bugs caused by including line breaks or spaces. twitter.com/leeerob/status/1593331366292250625
  • 21. The maximum number of projects is 60 60 (projects) / 3 (Next.js application) = 20 (services) https://vercel.com/docs/concepts/limits/overview • Fewer than 20 services are in operation, so the limit is unlikely to be reached any time soon. • If the same repository is connected, the Ignore Build setting is necessary because builds will be performed every time a commit is pushed.
  • 23. If a problems occurs, it is necessary to switch to maintenance mode. • All path requests will be redirected to the '/maintenance' page, indicating that the service is under maintenance. • Need to fetch a static asset to check whether the system is in maintenance mode. • As this is rare, we want to avoid unnecessary network traf fi c.
  • 24. First: Promote to Production • "Promote to Production" did not meet the requirements because this involves rebuilding the entire application, which is a slower process and would consume some time. https://vercel.com/docs/concepts/deployments/managing-deployments#promote-deployment-to-production
  • 25. Second: In _app.tsx • In app.tsx, the maintenance status periodically is fetched and if it is in maintenance mode, redirects the user to ` /maintenance ` . • Bad point: The amount of user traf fi c increases.
  • 26. Third: middleware and edge con fi g • Since it is resolved at the edge side, the user experience is almost unchanged. • Bad point: Applying middleware to all paths would make checking too frequent. Ref: https://github.com/vercel/examples/tree/main/edge-middleware/maintenance-page
  • 27. Conclusion: Instant Rollback (Beta) “the Instant Rollback is a relatively faster process since it involves assigning domains to an existing deployment rather than a complete rebuild.” • We plan to automate the process using Vercel CLI once it is of fi cially(not beta) released. https://vercel.com/changelog/instant-rollback-public-beta-available-to-revert-deployments
  • 28. Constraints “Deployments that have never been aliased to production a domain, e.g., most Preview Deployments, are not eligible. ” • We must fi rst deploy the application to production in maintenance mode. • Maintenance Mode for Future Maintenance Mode 🤔 Ref: https://vercel.com/docs/concepts/deployments/instant-rollback
  • 29. Reviewing the Three Years and Looking to the Future
  • 30. We made a good decision by choosing Vercel and Next.js • Vercel and Next.js were great even 3 years ago, but as we have seen so far, there have been a few things missing. • Recently, various new features have been rapidly added and they have been evolving. • There are many things I am excited about, including AppDir, Route Handler, Edge computing, Metadata, Typed link, Turborepo, Turbopack, and more.
  • 31. Thank you for your attention