Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/beautiful-dawn-7r9q24

To Reproduce

1. Visit the provided reproduction link.
2. Navigate to any todo on the index page after the 5th ID.
3. It should route to the 404 page.
4. Rename the middleware2.ts file to middleware.ts.
5. Repeat Step 2.
6. This will result in an application error.

Current vs. Expected behavior

Current Behaviour:

• With Middleware dynamic not found pages throws application error

Expected Behaviour:

• With Middleware dynamic not found page should navigate to 404 page

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

NA

Which area(s) are affected? (Select all that apply)

Middleware / Edge (API routes, runtime)

Additional context

Since Next 12, I have been experiencing issues with routing to the 404 page on dynamic pages when using middleware. I am attempting to render 404 pages when a path does not exist. However, when I enable middleware, it throws an application error instead of routing to 404. Interestingly, when I remove the middleware, the routing works as expected.

export async function middleware(request: NextRequest) {
  return NextResponse.next();
}