1. The document discusses the author's three years of experience using Vercel and Next.js for production applications. 2. It addresses how they overcame a limit of 10 projects by creating development and production branches for each service. 3. It also explains how they implemented a maintenance mode using Vercel's instant rollback functionality once it was out of beta. 4. In conclusion, the author reflects positively on choosing Vercel and Next.js initially and discusses new features they are excited about using going forward.

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

7. Introducing
“FANBASE ARENA”

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

20. Unexpected and delightful change!
😲

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.

22. Maintenance mode

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