Yesterday, we had the [NextJS Conf](https://nextjs.org/conf) and we got a lot of new things. [NextJS 12](https://nextjs.org/blog/next-12) has been released and it has got a ton of new and exciting features. One of these features is [middleware in NextJS](https://nextjs.org/docs/middleware) so let us see how it works with an example.

## What is NextJS Middleware?

Middleware are simple pieces of code that allows one to modify the response to a request even before it is completed. We can rewrite, redirect, add headers or even stream HTML based on the user's request.

\
> This definition is from the [NextJS Middleware Docs](https://nextjs.org/docs/middleware)

\
### Getting Started with NextJS 12

I am going to do everything in [Replit](https://replit.com/) for this example. You can also follow along with me on this tutorial.

\
The Repl - <https://replit.com/@AnishDe12020/NextJS-12-Middleware>

\
Creating a NextJS project with `create-next-app` will give us a project with NextJS 11 set up (as of 27th October 2021) so, firstly, we need to upgrade to NextJS 12.

With NPM -

```
npm install next@latest
```

With Yarn -

```
yarn add next@latest
```

## A simple middleware

Now, to add middleware, we need to make a `_middleware.js` file in our pages directory. Note that you can also add middleware files in sub-directories in the pages directory to make it run after the top-level middleware file. You can refer to the [NextJS Middleware Execution Order Documentation](https://nextjs.org/docs/middleware#execution-order) for more information.

\
Now let us write a simple middleware function -

```js
const middleware = (req, ev) => {
  return new Response(req.ua.os.name);
};

export default middleware;
```

This will show the operating system of the user on the page. We were streaming HTML to the user but now let us see how we can rewrite routes under the hood.

## A middleware that rewrites the route under the hood

First, we will create a new file called `[os].js` and copy in the `index.js` code into there, just replacing the function name.

`[os].js` -

```js
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by Vercel
            and Replit
        </a>
      </footer>
    </div>
  )
}
```

\
Now let us go back to our `_middleware.js` file and make some changes. First we will import `NextResponse`

```js
import {NextResponse} from "next/server"
```

\
Now, let us store the user's operating system in a variable

```js
const os = req.ua.os.name
```

\
Now, we can rewrite the URL to the new route we created and that is where `NextResponse` comes in.

```js
return NextResponse.rewrite(`/${os}`) // This return is necessary
```

\
This is how out `_middleware.js` files should look now -

```js
import {NextResponse} from "next/server"

const middleware =  (req, ev) => {
  const os = req.ua.os.name

  return NextResponse.rewrite(`/${os}`)
};

export default middleware;
```

\
Now let us import Next Router in our new route

```js
import {useRouter} from "next/router"
```

\
As this is a react hook, we need to create a new instance of the NextJS router inside of the function being returned.

```js
const router = useRouter()
```

\
We can get the operating system of the user from the URL parameter we rewrote earlier in the middleware

```js
const os = router.query.os
```

\
At last, let us show the user what operating system they are using

```js
<h1 className={styles.title}>
      You are using the {os} operating system
</h1>
```

\
At last this is how are `[os].js` should look like -

```js
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import {useRouter} from "next/router"

export default function Os() {
  const router = useRouter()

  const os = router.query.os
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          You are using the {os} operating system
        </h1>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by Vercel
            and Replit
        </a>
      </footer>
    </div>
  )
}
```

\
Now if we visit the home page, we should see this (note that I had removed some of the nextjs boilerplate code) -

 ![image.png](https://cdn.hackernoon.com/images/ckv-9-eeab-400-sm-0-as-6-d-0-et-5-zak.jpg)

I can emulate the browser user agent using the browser dev tools and we get a different result for the operating system -

 ![image.png](https://cdn.hackernoon.com/images/ckv-9-eeab-800-sn-0-as-6-e-0-c-90-gu-3.jpg)

Now, note that the URL is `https://nextjs-12-middleware.anishde12020.repl.co/` and not  `https://nextjs-12-middleware.anishde12020.repl.co/Linux` or `https://nextjs-12-middleware.anishde12020.repl.co/Mac Os`. This is because we are re-writing the request in the middleware and hence there is no change on the client-side.

## How does NextJS middleware work under the hood?

NextJS middleware makes use of [Vercel's Edge Functions](https://vercel.com/features/edge-functions) which run on the [V8 Engine](https://v8.dev/). The V8 Engine is a javascript engine written in C++ and is maintained by Google. It is considerably faster than running NodeJS on a virtual machine or a container and Vercel claims these edge functions to be instantaneous.

### Limitations of edge functions

Some NodeJS APIs are not available with middleware (as they are edge functions) such as the filesystem API. Also, some NodeJS modules won't work as only modules which have implemented ES Modules and do not use any native NodeJS APIs are allowed. For more information, see [here](https://nextjs.org/docs/api-reference/edge-runtime)

## Wrapping Up

So far, we have seen the power of middleware and how this is going to be a huge feature for developers. Things like serving localized sites, providing region-based discounts, authentication, bot detection and much more can be done quickly and easily by using middleware.

\
The team at Vercel has also put together many examples using middleware. Check them out [here](https://vercel.com/features/edge-functions#examples)

\
That is it for this post, feel free to leave down a comment below and you can also reach out to me on [Twitter](https://twitter.com/AnishDe12020)

Google

Target

Twitter

2022 - HackerNoon Contributor of the Year - Firebase

Read My Stories

Nominated for 2022 - HackerNoon Contributor of the Year - Firebase

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

An Intro to Middleware in NextJS 12

Too Long; Didn't Read

Companies Mentioned

@anishde12020

RELATED STORIES