Skip to content
New Project

Maintenance Page

This template shows how to quickly trigger a maintenance page using Edge Config

DeployView Demo

maintenance-page example

This example shows how to implement a maintenance page on the edge

Demo

https://edge-maintenance-page.vercel.app

How to Use

You can choose from one of the following two methods to use this repository:

One-Click Deploy

Deploy the example using Vercel:

Clone and Deploy

Execute create-next-app with pnpm to bootstrap the example:

pnpm create next-app --example https://github.com/vercel/examples/tree/main/edge-middleware/maintenance-page

Set up environment variables

Copy the .env.example file in this directory to .env.local (which will be ignored by Git):

cp .env.example .env.local

This example requires you to set up an Edge Config and store its connection string in the EDGE_CONFIG environment variable. Fill the Edge Config you create with this content:

{ "isInMaintenanceMode": true }

Next, run Next.js in development mode:

pnpm dev

Deploy it to the cloud with Vercel (Documentation).

GitHub
Ownervercel
Repositoryexamples
Use Cases
Edge Middleware
Edge Config
Stack
Next.js
Tailwind

Related Templates

Next.js Boilerplate

Get started with Next.js and React in seconds.
Next.js Boilerplate thumbnail
DeployView Demo