Maintenance mode check in Next.js middleware.ts

#opensource #nextjs #vercel

In this article, we review the code related to maintenance mode check in Grida source code, but first we need to understand what a maintenance mode is in Vercel.

Maintenance mode in Vercel

I am quoting the documentation found in Maintenance Page Example

below:

When we do a release, promotion, event, etc. that might bring more attention than usual to a page;

Its a good idea to have a backup plan that includes showing a different page to the users in case something fails. If this page receives a lot of traffic, we can use the edge, a previously generated static page and Edge Config to give the users dynamic at the speed of static.

You would use Maintenance Page when you want to change the flow of the traffic quickly in case something fails, but how to do it?

Detect if your app is in maintenance mode

The below code is picked from the Maintenance Page example.

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 see if the maintenance page should be shown
  const isInMaintenanceMode = await get('isInMaintenanceMode')
  // If in maintenance mode, point the url pathname to the maintenance page
  if (isInMaintenanceMode) {
    req.nextUrl.pathname = `/maintenance`
    // Rewrite to the url
    return NextResponse.rewrite(req.nextUrl)
  }
}

Here the most important check is about maintenance mode

// Check Edge Config to see if the maintenance page should be shown
const isInMaintenanceMode = await get('isInMaintenanceMode')

Then if your project is in maintenance mode, you would do something like below, to show the maintenance page:

// If in maintenance mode, point the url pathname to the maintenance page
if (isInMaintenanceMode) {
  req.nextUrl.pathname = `/maintenance`
  // Rewrite to the url
  return NextResponse.rewrite(req.nextUrl)
}

Github discussion:

There is a discussion on Github about Maintenance mode in Vercel.

Some suggestions involve using redirects in next.config.ts depending on an enviroment variable called MAINTENANCE_MODE but what folows that is a conversation about how this be indexed by Google and for that reason, comment suggests to add <meta name=”robots” content=”noindex” />

The accepted answer points to the Maintenance page example.

Maintenance mode check in Grida Form

The below code is picked from forms/middleware.ts

export async function middleware(req: NextRequest) {
  // #region maintenance mode
  if (process.env.NODE_ENV === "production") {
    try {
      // Check whether the maintenance page should be shown
      const isInMaintenanceMode = await get<boolean>("IS_IN_MAINTENANCE_MODE");

      // If is in maintenance mode, point the url pathname to the maintenance page
      if (isInMaintenanceMode) {
        req.nextUrl.pathname = `/maintenance`;

        // Rewrite to the url
        return NextResponse.rewrite(req.nextUrl);
      }
    } catch (error) {
      // show the default page if EDGE_CONFIG env var is missing,
      // but log the error to the console
      console.error(error);
    }
  }
  // #endregion maintenance mode

This code handles the maintenance mode exactly as what is provided in the Vercel’s example, but there are slight differences:

Try/catch block
process.env.NODE_ENV check

This defensive mechanism is important to handle any unexpected errors and that to apply the maintenance mode only in production.

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com

My Github — https://github.com/ramu-narasinga

My website — https://ramunarasinga.com

My Youtube channel — https://www.youtube.com/@thinkthroo

Learning platform — https://thinkthroo.com

Codebase Architecture — https://app.thinkthroo.com/architecture

Best practices — https://app.thinkthroo.com/best-practices

Production-grade projects — https://app.thinkthroo.com/production-grade-projects