Maintenance mode in Vercel & Netlify

Workaround to set up a maintenance page, even if not supported

Unfortunately, unlike Heroku, Netlify & Vercel don't have a simple switch for maintenance mode.

Here's how to do it:

Netlify.

Utilize split testing

  1. Create a separate branch with the maintenance view. Could be a simple HTML.
  2. Route 100% of the traffic to this branch

Vercel

Split testing is not available, but we can utilize env variables.

  1. Set up a MAINTENANCE flag in env variables
  2. Trigger a re-deploy.
const MyApp: React.FC<AppProps> = ({Component, pageProps}) => {
  if (process.env.MAINTENANCE) {
    return <Maintenance />;
  }
  return <Component {...pageProps} />;
};

export default MyApp;