Quickstart for Using Edge Middleware

In this quickstart guide, you'll learn how to get started with Next.js Middleware and using Edge Middleware in the Epycbyte CLI.

Next.js (/app)
Next.js (/pages)
Other frameworks

For information on the API and how to use it, see the Edge Middleware API documentation. If you would prefer to jump straight into code, see the Create Edge Middleware using Next.js Middleware section.

Prerequisites

Ensure you have Node.js installed.

Install the latest version of pnpm:

curl -fsSL https://raw.githubusercontent.com/pnpm/pnpm/main/install-pnpm.sh | bash

Initialize a new project with pnpm:
```
pnpm init -y
```

Create Edge Middleware using Next.js Middleware

1. Create a New Next.js Project

Run the following command to create a new Next.js project:

pnpm create next@latest

2. Add Dependencies

Install required dependencies:

pnpm add typescript --save-dev
pnpm add @types/node --save-dev

3. Create Middleware File

Create a new file middleware.ts in your project root:

export async function middleware(request: Request, response: Response) {
  // Your middleware logic here
}

4. Configure Routes

Modify your pages/route.ts to include your middleware:

import { NextResponse } from 'next/server';
import { middleware } from './middleware';

export async function route(req: Request, res: Response) {
  const response = await middleware(req, res);
  return NextResponse.next(response);
}

Install the @epycbyte/functions Package

Install the necessary package:

pnpm add @epycbyte/functions --save-dev

Add Middleware Code

Here's an example of how to implement your middleware:

import { NextResponse } from 'next/server';

export async function middleware(request: Request, response: Response) {
  // Check if the request is from a trusted domain
  const isTrustedDomain = ['yourdomain.com', 'anotherdomain.com'].includes(
    new URL(request.getHeaders('origin') as string).hostname()
  );

  if (!isTrustedDomain) {
    return NextResponse.redirect('/unauthorized');
  }

  // Your middleware logic here

  return NextResponse.next(response);
}

Test Your Middleware

1. Run Locally

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).

2. Deploy with Epycbyte CLI

To test your middleware, use the Epycbyte CLI to deploy your project:

epycbyte deploy

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

Check Logs Tab

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

Summary

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.

Key Takeaways for Edge Middleware on Next.js

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.
To learn more about Edge Middleware, and its use cases, see the Edge Middleware documentation.

Last updated on October 17, 2024.

38. functions / edge-middleware: Quickstart for Using Edge Middleware