Quickstart for Using Edge Middleware

The content of these pages are not relevant to this quickstart, but they are used to demonstrate the use of the middleware.

export default function SecretPage() {
  return (
    <div>
      <h1>Secret Page</h1>
      <p>This is a secret page!</p>
    </div>
  );
}

@vercel/functions provides a helper method geolocation which can be used to fetch the geo location of the visitor.

pnpm i @vercel/functions

The following middleware code takes the geographic location of the visitor from the request, and rewrites the request to a login page if they are from SE (Sweden).

When copying this code into your project, you will need to replace the BLOCKED_COUNTRY variable with the ISO Alpha-2 code of your location. You can look up this value on the IBAN country code list.

import { NextRequest, NextResponse } from 'next/server';
import { geolocation } from '@vercel/functions';
 
// The country to block from accessing the secret page
const BLOCKED_COUNTRY = 'SE';
 
// Trigger this middleware to run on the `/secret-page` route
export const config = {
  matcher: '/secret-page',
};
 
export default function middleware(request: NextRequest) {
  // Extract country. Default to US if not found.
  const { country = 'US' } = geolocation(request);
 
  console.log(`Visitor from ${country}`);
 
  // Specify the correct route based on the requests location
  if (country === BLOCKED_COUNTRY) {
    request.nextUrl.pathname = '/login';
  } else {
    request.nextUrl.pathname = `/secret-page`;
  }
 
  // Rewrite to URL
  return NextResponse.rewrite(request.nextUrl);
}

When working locally, your IP address will be 127.0.0.1. This means that the geolocation can't be computed and the middleware location check will default to US (as defined in step five).

To test your middleware, use the Vercel CLI to deploy your project with vercel deploy.

Once deployed, open the production url, and edit the url to https://<your-project-name>.vercel.app/secret-page, you should be redirected to the /login page.

Edit the BLOCKED_COUNTRY variable to a country you are not in and deploy again with vercel deploy. You should now be able to access the /secret-page route.

Once your Function is published, go to your project's overview page from your Vercel dashboard and click the Logs tab. This tab allows you to view, search, inspect, and share your runtime logs invoked by Edge Middleware.

To view details for these logs click any individual log entry. The information will appear in the right sidebar.

You have created a new Next.js project and deployed Edge Middleware. Based on the incoming requests location, you have rewritten the request to a login page.

• Edge Middleware runs before the cache
• You can import helpers that extend Web API objects (NextResponse, NextRequest, see Edge Middleware API for more information on these APIs)
• You can use a custom matcher config to only trigger the middleware in specific routes
• You cannot use Node.js APIs in Edge Middleware

To learn more about Edge Middleware, and its use cases, see the Edge Middleware documentation.