Best way to handle maintenance mode in a nextjs app ?
Unanswered
American black bear posted this in #help-forum
American black bearOP
i heard some people reccomend middleware, edge config others said redirects in the next config looking for some advice on whats best here. ideally for it to be instant instead of having envs and redeploying. thanks in advance.
71 Replies
feature flags
you turn it on from backend
American black bearOP
do you mind elaborating more on it please
https://flags-sdk.dev/ this should be helpful although I've never used it
you create a feature flag which toggles the maintenance mode
you create a feature flag which toggles the maintenance mode
when that feature flag returns true, you show your maintenance screen
American black bearOP
right
would you place this in the middelware
i dont think the root layout is a good place as that would make my whole app shell dynamic
i was thinking root layout so i can donitlaly render children or the miantanace screen
have a dynamic server component in root layout. It gets the value of this flag and then redirect user to /under-maintenance?callback=currentUrl and you render that page there
American black bearOP
and the currentUrl is for them to retry ?
but would that not make the app shell dynamic like all the children would be dynamic
since we used it in the layout ssr?
American black bearOP
i see
the page would be blocked for a little sec
since its not suspended
@American black bear and the currentUrl is for them to retry ?
yea you can redirect user to currentUrl if they press retry(or any other logic)
not too sure about that but a loading.tsx should take care of it
you can just return null from that component
so it won't render any UI
in next16 you can put that in async component in <Suspense> and still have static shell (and the rest of the children)
hell if you have a static site, why would you need "under maintenance" ? just use client component ?
hell if you have a static site, why would you need "under maintenance" ? just use client component ?
American black bearOP
its not a static site
its a webapp
has marketing page
and dashboard
using external backend api
for data source
and you only want to put under maintenance in the dashboard/dynamic part right?
American black bearOP
i might consider the @@ts-ignore approach or even the edge middleware
not really since the marketing page also renders dynamic data
from the api
like recent payouts etc
so i would just like to block the users from going anywhere
just a redirec to maintance
untill its back
usually those data are cached so it uses SWR
which is ideal since you dont have to display unknown data if its under maintenance
American black bearOP
i would just render a new route /maintantace
okay if uhh your users are fine with that
American black bearOP
yeah
that would be the preffered
so maybe just middleware + feature flag cehck
let us know if it works so we can mark yi's answer
American black bearOP
so i use the flag packg from nextjs
would i be able to see it on my vercel dashboard
and enable it on and off
or how would i toggle it
what if i was to use edge config @aardani @@ts-ignore
dk what that is, sorry
ditto 😭 sorry
i know how to cache marketing page 
but idk anything about maintenance mode
but idk anything about maintenance modeMagnolia Warbler
I shutdown the app service in systemd and my Nginx config has a fallback page
Palomino
im also interested in this, can someone ping me when there is a solution?
American black bearOP
yeah so i tought the edge config could be a could idea
but shit is expesinve
5$ for 500 writes and 3$ 1M Reads
so if i place that in the middleware the 1M requests are gonna fly i have 10+ routes which this runs on.
still looking for something else
might have to look into feature flags
American black bearOP
btw guys ended up going with this https://www.npmjs.com/package/next-maintenance-mode
and using upstash redis as the provider
its cheaper in comparison to the edge config
also has the ability to add a cache period if needed
American black bearOP
Turns out it's not so cheap when ur middleware runs on all routes lol
So I'm just going to have it be an env
And in the middle check if that env is set to true then rewrite to the maintenance route
Only drawback is build time
@American black bear Only drawback is build time
why not just run it at layout