docs: update Middleware API reference

[balazsorban44]

I changed the order of NextRequest and NextFetchEvent as they are presented in the function signature.

There also seemed to be some issues with the heading levels.

Also, NextResponse is a documented API, but the example code uses Response. I wasn't sure if this was a mistake in the docs or in the code.

I noticed that other similar docs pages have a collapsible Examples section at their top:

• https://nextjs.org/docs/api-reference/next/image
• https://nextjs.org/docs/api-reference/next/head
• https://nextjs.org/docs/api-reference/next/amp

Image below:

Should the Middleware docs have the same?

[styfle]

NextResponse is a documented API, but the example code uses Response

Both are acceptable return values. The NextResponse object has some helper methods on it.

We should definitely have examples linked from the Middleware docs to here: https://github.com/vercel/examples

[balazsorban44]

Turns out Middleware is already kind of supported by next-auth

import { getToken } from "next-auth/jwt"
import { NextResponse } from "next/server"

export async function middleware(req) {
  // return early if url isn't supposed to be protected
  if (!req.url.includes("/protected-url")) {
    return NextResponse.next()
  }

  const session = await getToken({ req, secret: process.env.SECRET })
  // You could also check for any property on the session object,
  // like rolec === "admin" or name === "John Doe", etc.
  if (!session) return NextResponse.redirect("/api/auth/signin")

  // If user is authenticated, continue.
  return NextResponse.next()
}

What I would like is if we had a nicer API for this, and we also got the Database Session working. Again, I am not sure of the bottleneck effect there, since we have to do multiple database queries.