[Bug]: Running Next Dev locally with MiddlewareRequest causes error

[isaac-martin]

Summary

Running next dev locally with MiddlewareRequest inside middleware.ts causes an error MiddlewareRequest only works in a Netlify Edge Function environment

If you have to run locally using netlify dev this should be called out inside the documentation.

Subsequently there is a typescript error also Types of property 'geo' are incompatible.

Steps to reproduce

Inside middleware.ts import { MiddlewareRequest } from "@netlify/next";
create a new netlify middleware request with the below code
const request = new MiddlewareRequest(req);
go to a url in browser and notice the error

A link to a reproduction repository

No response

Next Runtime version

x

Is your issue related to the app directory (beta)?

• Yes, I am using the app directory

More information about your build

• I am building using the CLI
• I am building using file-based configuration (netlify.toml)

What OS are you using?

Mac OS

Your netlify.toml file

`netlify.toml`

# Paste content of your `netlify.toml` file here

Your public/_redirects file

`_redirects`

# Paste content of your `_redirects` file here

Your next.config.js file

`next.config.js`

# Paste content of your `next.config.js` file here. Check there is no private info in there.

Builds logs (or link to your logs)

Build logs

# Paste logs here

Function logs

Function logs

# Paste logs here

.next JSON files

generated .next JSON files

# Paste file contents here. Please check there isn't any private info in them
# You can either build locally, or download the deploy from Netlify by clicking the arrow next to the deploy time.

[sarahetter]

Hi @isaac-martin . I am unable to duplicate this behaviour. Here are the steps I took:

1. Created a next app with npx create-next-app@latest, choosing the options below (hitting enter all the way down)

2. Installed @netlify/next with npm i @netlify/next
3. Added a middleware.ts file in the root:

import { MiddlewareRequest, NextRequest } from '@netlify/next'


export async function middleware(req: NextRequest) {

  const request = new MiddlewareRequest(req)
  
  return request.next()
}

3. Ran ntl dev

I am seeing the site running with no errors.

Let me know what you have done differently than this to get your result.

[sarahetter]

Closing as stale

[isaac-martin]

Sorry @sarahetter have been off work for the last few months. Am i correct in assuming that you are running your local dev environment with netlify dev ? Is this a requirement for using this?

[sarahetter]

Yes, I was running with netlify dev. The @netlify/next package makes use of edge functions, and so using our dev command rather than next dev is required.

I'll create an issue to make this clearer in the documentation.

[ghost]

I am experiencing the same issue, even when running ntl dev.

To reproduce, I followed the steps above. I created a new next project (tried with several different options, app/pages, src, etc), installed @netlify/next, added the middleware.ts just like above, and ran ntl dev.

Then I get:

Error: MiddlewareRequest only works in a Netlify Edge Function environment
    at middleware (middleware.ts:6:18)
  4 | export async function middleware(req: NextRequest) {
  5 |
> 6 |   const request = new MiddlewareRequest(req)
    |                  ^
  7 |   
  8 |   return request.next()
  9 | }

My versions:

"dependencies": {
    "@netlify/next": "^1.4.9",
    "next": "15.1.3",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },

Can we please reopen this issue?

EDIT: even the demo app from Netlify itself for NextJS edge middleware seems broken... https://next-edge-middleware.netlify.app/