Calling all Next.js developers! Do you wish you could do _more_ with middleware? Do you want to be able to intercept and rewrite the response of a Next.js statically generated page at the edge based on geolocation data? Do you also want to be able to transform page props on the fly?

Now you can! With Next.js Advanced Middleware. It’s powered by [Netlify Edge Functions](https://ntl.fyi/3Qojhck), brand new and only on Netlify.

In this tutorial, I show you how to use Next.js Advanced Middleware on Netlify to intercept a request to a statically pre-generated page, and rewrite the HTML response to change some text and page props based on geolocation data.

## Deploy the tutorial code to Netlify

Here’s the [demo site](https://nextjs-advanced-middleware-demo.netlify.app/) I made earlier! If you want to dive in immediately, you can fork the tutorial’s code repository on GitHub, and deploy the site to your own Netlify account in seconds. Click on the Deploy to Netlify button below, and take it for a spin!

[![Deploy to Netlify Button](https://www.netlify.com/img/deploy/button.svg)](https://ntl.fyi/3K7uewQ)

## Build it yourself

Alternatively, if you’d like to build out the code from scratch, you can follow the guide below to create a new Next.js project, add a new static route, and use middleware to rewrite the HTML of the response at The Edge.

### Prerequisites

Before getting started, check you’ve got the tools you’ll need to complete the tutorial.

-   [Node.js](https://nodejs.org/en/) (LTS recommended)
-   [GitHub CLI](https://cli.github.com/)
-   [Netlify CLI](https://www.npmjs.com/package/netlify-cli) — latest version

### Project setup

Let’s create a new Next.js app. Head on over to your terminal, and run the following command, substituting `YOUR_PROJECT_NAME` for a name of your choice.

```
npx create-next-app {YOUR_PROJECT_NAME}
```

Next, to make the magic happen, we need the `@netlify/next` package. Run the following command in your terminal, which will install the package as a dependency in the project’s package.json file.

```
npm install @netlify/next
```

Next, open up the project in your IDE of choice.

### Add a new static route

Next.js offers file-based routing. Adding a JavaScript or TypeScript file into the `pages` directory creates a new browser route, with the same name as the file. Create a new file in the pages directory named `static.js`, and add the following code.

pages/static.js

```
const Page = () => {  return (    <main>      <h1 id="message">A static page</h1>    </main>  );};
export default Page;
```