Maintenance page usage example

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 a redis cache to give the users, dynamic at the speed of static.

This will let us change the flow of the traffic quickly in case something fails.

How to do it?

You can add a _middleware.js file inside a big-promo folder with a index.js file for the page. Inside _middleware.js you can do something like this:

import { NextResponse } from 'next/server'

export async function middleware(req) {
  // Clone the URL
  const url = req.nextUrl.clone()

  // Get value from a redis cache
  const isInMaintenanceMode = api.get('...')

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

    // Rewrite to the url
    return NextResponse.rewrite(url)
  }
}

If you need help with how to use a redis cache with edge functions you can see this example. If you want to see how this maintenance page works, check the /big-promo route.