Is there a way to place a Next.js application into maintenance mode on Vercel?

Question

Is there a way to place a Next.js application into maintenance mode on Vercel?

After successfully launching my nextjs application on Vercel, I've been thoroughly impressed with the overall process.

However, there is one minor aspect that I wish could be improved: the ability to easily activate a maintenance mode for my app. Unfortunately, it seems that this feature is not currently available on Vercel.

So, my inquiry is: Has anyone encountered this issue before and found a solution they can share?

I am considering two possible approaches:

Adapting my app so that if it detects a specific environment variable (such as MAINTENANCE_MODE=true), it automatically redirects users to a maintenance screen. However, this solution has its drawbacks since updating an environment variable on Vercel requires a new deployment to take effect.
Implementing a straightforward toggle within Vercel that would allow me to effortlessly enable or disable maintenance mode for my project. This would truly be a game-changer.

next.js serverless vercel

Answer 1

Answer №1

"To activate "Maintenance Mode," you can utilize an Environment Variable along with the redirects feature in your next.config.js file (make sure to use Next.js version 9.5.0 or newer).

module.exports = {
  redirects() {
    return [
      process.env.MAINTENANCE_MODE === "1"
        ? { source: "/((?!maintenance).*)", destination: "/maintenance.html", permanent: false }
        : null,
    ].filter(Boolean);
  }
};

This code snippet creates a wildcard route that captures incoming requests and then temporarily redirects them to the /maintenance.html location.

Please note that any modifications to the deployment settings or environment variables require a new deployment to take effect.

Previous Solution

If you're not using Next.js or running an outdated version, you can implement "Maintenance Mode" by utilizing the redirects property in your vercel.json configuration file.

{
  "redirects": [
    { "source": "/((?!maintenance).*)", "destination": "/maintenance.html", "permanent": false }
  ]
}

Answer 2

"To activate "Maintenance Mode," you can utilize an Environment Variable along with the redirects feature in your next.config.js file (make sure to use Next.js version 9.5.0 or newer).

module.exports = {
  redirects() {
    return [
      process.env.MAINTENANCE_MODE === "1"
        ? { source: "/((?!maintenance).*)", destination: "/maintenance.html", permanent: false }
        : null,
    ].filter(Boolean);
  }
};

This code snippet creates a wildcard route that captures incoming requests and then temporarily redirects them to the /maintenance.html location.

Please note that any modifications to the deployment settings or environment variables require a new deployment to take effect.

Previous Solution

If you're not using Next.js or running an outdated version, you can implement "Maintenance Mode" by utilizing the redirects property in your vercel.json configuration file.

{
  "redirects": [
    { "source": "/((?!maintenance).*)", "destination": "/maintenance.html", "permanent": false }
  ]
}

Answer 3

Answer №2

To approach this issue differently, I have implemented a unique solution by developing a dedicated maintenance page and conditionally intercepting the rendering of the main component based on an environment variable.

To accomplish this customization, I made adjustments to the _app.js code as follows:

function MyApp({ Component, pageProps }) {
  if (process.env.NEXT_PUBLIC_MAINTENANCE_MODE === 'true') {
    return <Maintenance />
  } else {
    return <Component {...pageProps} />
}

It is important to note that, similar to previous suggestions, this method relies on Vercel environment variables. As stated on their platform: "A new Deployment is required for your changes to take effect."

Answer 4

To approach this issue differently, I have implemented a unique solution by developing a dedicated maintenance page and conditionally intercepting the rendering of the main component based on an environment variable.

To accomplish this customization, I made adjustments to the _app.js code as follows:

function MyApp({ Component, pageProps }) {
  if (process.env.NEXT_PUBLIC_MAINTENANCE_MODE === 'true') {
    return <Maintenance />
  } else {
    return <Component {...pageProps} />
}

It is important to note that, similar to previous suggestions, this method relies on Vercel environment variables. As stated on their platform: "A new Deployment is required for your changes to take effect."

Answer 5

Answer №3

Building on what was mentioned by @ptrkcsk, if you decide to create a maintenance page within the pages directory and are using the <Image> component from next/image to render images, don't forget to include your static folder in the redirects regex as well.

Here is the source pattern that has been effective for me:

/((?!maintenance)(?!_next)(?!static).*)

Answer 6

Building on what was mentioned by @ptrkcsk, if you decide to create a maintenance page within the pages directory and are using the <Image> component from next/image to render images, don't forget to include your static folder in the redirects regex as well.

Here is the source pattern that has been effective for me:

/((?!maintenance)(?!_next)(?!static).*)

Answer 7

Answer №4

Vercel has introduced a new method for implementing maintenance mode in 2023 without the need for re-deployment. You can check out Vercel's Example App: Maintenance Page.

This approach involves utilizing Vercel's Edge Config and Next.js Middleware.

To begin, define a key called isInMaintenanceMode in the Edge Config of your project. Any changes made to the Edge Config storage are quickly propagated (around 10 seconds according to Vercel). However, there are limitations such as not being able to read it from any location. This also comes with a cost as noted in the documentation.
In your Next.js project, create a file named middleware.js which will verify the value of isInMaintenanceMode and adjust the routing accordingly:

import { NextRequest, NextResponse } from 'next/server'
import { get } from '@vercel/edge-config'

export const config = {
  matcher: '/big-promo',
}

export async function middleware(req: NextRequest) {
  // Check Edge Config to determine if the maintenance page should be displayed
  const isInMaintenanceMode = await get('isInMaintenanceMode')

  // If maintenance mode is active, redirect the URL pathname to the maintenance page
  if (isInMaintenanceMode) {
    req.nextUrl.pathname = `/maintenance`

    // Rewrite the URL
    return NextResponse.rewrite(req.nextUrl)
  }
}

Answer 8

Vercel has introduced a new method for implementing maintenance mode in 2023 without the need for re-deployment. You can check out Vercel's Example App: Maintenance Page.

This approach involves utilizing Vercel's Edge Config and Next.js Middleware.

To begin, define a key called isInMaintenanceMode in the Edge Config of your project. Any changes made to the Edge Config storage are quickly propagated (around 10 seconds according to Vercel). However, there are limitations such as not being able to read it from any location. This also comes with a cost as noted in the documentation.
In your Next.js project, create a file named middleware.js which will verify the value of isInMaintenanceMode and adjust the routing accordingly:

import { NextRequest, NextResponse } from 'next/server'
import { get } from '@vercel/edge-config'

export const config = {
  matcher: '/big-promo',
}

export async function middleware(req: NextRequest) {
  // Check Edge Config to determine if the maintenance page should be displayed
  const isInMaintenanceMode = await get('isInMaintenanceMode')

  // If maintenance mode is active, redirect the URL pathname to the maintenance page
  if (isInMaintenanceMode) {
    req.nextUrl.pathname = `/maintenance`

    // Rewrite the URL
    return NextResponse.rewrite(req.nextUrl)
  }
}

Answer 9

Answer №5

If there isn't already a file named _app.js in the pages directory, create one.
Copy and paste the code below into the newly created file:

import React from 'react';

function MyApp({ Component, pageProps }) {
  const maintenanceMode = true; // Change this to false when maintenance is complete
  const MaintenancePage = () => <div>Maintenance mode</div>;
  
  return (
    <>
      {maintenanceMode ? <MaintenancePage /> : <Component {...pageProps} />}
    </>
  );
}

export default MyApp;

Modify the <MaintenancePage> component to suit your needs.
To activate maintenance mode, set the maintenanceMode variable to true. Once maintenance is finished, revert it back to false.
You can also customize the styling of the maintenance page by creating a CSS file if desired.

Answer 10

If there isn't already a file named _app.js in the pages directory, create one.
Copy and paste the code below into the newly created file:

import React from 'react';

function MyApp({ Component, pageProps }) {
  const maintenanceMode = true; // Change this to false when maintenance is complete
  const MaintenancePage = () => <div>Maintenance mode</div>;
  
  return (
    <>
      {maintenanceMode ? <MaintenancePage /> : <Component {...pageProps} />}
    </>
  );
}

export default MyApp;

Modify the <MaintenancePage> component to suit your needs.
To activate maintenance mode, set the maintenanceMode variable to true. Once maintenance is finished, revert it back to false.
You can also customize the styling of the maintenance page by creating a CSS file if desired.

Is there a way to place a Next.js application into maintenance mode on Vercel?

Answer №1

Previous Solution

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

No solution was found for implementing Airbnb TypeScript in React.js (Next.js) using ESLint

Having trouble identifying the dotenv package when running `dotenv -e .env.dev yarn dev` in a Next.js project

Tips for leveraging the functions service in Next.js for better code reusability

Solving the issue of font awesome override in nextJS

Is it really a smart idea to have an abundance of conditionals running in a middleware in next.js? Let's explore

What is causing styled-components to include my attributes in the DOM?

Tips for creating successful tests for a project that includes i18n functionality

Tips for avoiding components from re-rendering when switching between browser tabs

Trouble accessing session cookie during server-side request with getServerSideProps in Next.js

When the tab is switched, the URL remains the same. However, if the URL is changed,

Error: Type Error when using custom App and getInitialProps in Next.js

Do you need to incorporate 'next-redux-wrapper' into a 'Next.js + Redux Toolkit' project if you are solely using 'static generation'?

Having trouble importing Tone.js in your Next.js project?

Strategies for resolving the "Objects are invalid React children" issue in Next.js 13 and Next Auth

Unable to create a cookie in server action of Next.js version 13.4

Is it safe to establish a direct connection between NextJS and MongoDB without any intermediary services?

Discover the steps to deploy NextJS on AWS with the same efficiency as Vercel

The object literal can only define existing properties, and the property 'x' is not found in the type (prisma)

What could be causing the error message to appear stating that each list item must have a unique key when utilizing react-bootstrap in Nextjs?

Is MongoDB's find() method returning incorrect objects?