[App Route] How can I redirect to 404 or not-found from the middleware?

[abaracedo]

Summary

I'm using the latest version of NextJS (v13.4) and I've created a middleware for checking some URLs. If an user tries to request a URL that doesn't exist I want to redirect them to a 404 page or not-found.tsx but I don't see any example in the docs for doing instead and I'm getting a too many requests error.

I'm not sure if the solution should be creating a /404 route...

Edit: I've found this question but for v12 but it doesn't work as rewrite or redirect expects a URL.

Additional information

No response

Example

No response

[Mevrael]

Same for me. Extremely annoying. Next13 and Vercel is not professional business that we can rely on, and it's a childish product with so many bugs, and you can't even do the basics.

We will be moving away from this nonsense. Next 13 is a joke. Never in my life have I had to waste months on making middleware, authentication, access checks, and basic errors like 404 work properly in an enterprise B2B platform.

---

For now, another ugly solution I had to implement to make 404 work from a middleware:

• You will have to create app/404/page.js
• Now return NextResponse.rewrite(new URL('/404', request.url)); will work again, as in next12.

Apart from that:

• Make sure to have a custom global app/not-found.js page
• And app/[...not-found]/page.js with this content (same content for app/404/page.js):

export default function NotFoundCatchAll() {
  notFound();
}

[devjiwonchoi]

Dear @Mevrael, you seem to have many ideas to improve the Next.js App Router.
If you spare your time to open an issue and tag me, list the things to be fixed/enhanced in this comment, or send them to me via email devjiwonchoi@gmail.com, I assure you that I'll do my best to implement your needs. Thank you!

[devjiwonchoi]

First of all, the not-found or notFound is not for "redirecting to 404 page".

It is to throw an error with 404 status and render an alternate UI.

If an user tries to request a URL that doesn't exist I want to redirect them to a 404 page or not-found.tsx

You do not need a middleware for this, the not-found file does the work for you.

Try to set your not-found on the root segment of your route (e.g. app/not-found.tsx), and will resolve your issue.

// app/not-found.tsx

import Link from 'next/link'
 
export default function NotFound() {
  return (
    <div>
      <h2>Not Found</h2>
      <p>Could not find requested resource</p>
      <Link href="/">Return Home</Link>
    </div>
  )
}

Note that you can also trigger the not-found file inside Server Components with the notFound function.

Reference

• not-found
• notFound

[chev0004]

@activenode thanks, it works for me too

[Shinkei]

I just want to do an early return to not process paths that I identify as invalid.
IMO I think this is a valid scenario to have this feature 😢

[activenode]

but it is possible with what I said

[Shinkei]

Yes it works , thanks indeed for you solution.
my 2 cents on this discusion 🪙: In my scenario I want to send the user to a 404 page which for me is more understandable to have a notFound() call instead of a NextResponse.error().
This is confusing to specially when you have an error page and a not-found page.

[denis-maslovskiy-vention]

Returning NextResponse.error() actually does the trick and allows you to render the 404 page. But I also agree with previous commentators, I would like to have a more clear and documented method

[ELHart05]

what about nextjs pages router?

[heymattiarighetti]

notFound() won't work in middleware

NextResponse.error() worked fine on localhost but threw me a 500: INTERNAL_SERVER_ERROR Code: EDGE_FUNCTION_INVOCATION_FAILED on the server

Vercel logs an "Error: Failed to execute 'error' on 'Response': the method is not implemented."

👉 Luckily, I found a solution

NextResponse.rewrite

Inside my middleware file, instead of returning NextResponse,error(), I did this:

return NextResponse.rewrite(new URL("/not-found", request.url));

Now it works properly 👌

The URL is preserved, and the page is rendered as per your not-found.tsx file, as would happen with other not-found pages

Hope it helps!

[heymattiarighetti]

Glad to hear 😁

[activenode]

Nice, thanks for getting back, can you confirm your NextJS version?

[heymattiarighetti]

@activenode 14.2.2

[LassazVegaz]

Thank you very much. This is what I was looking for. But I don't understand how it renders the not-found page in the same requested URL. I would like to know how that worked.

[heymattiarighetti]

@LassazVegaz, it requests a page that doesn't exist but shows the same URL as the user's request. I called the page "not-found," but it could've been "ahiosfhfoasf," either. If you have something inside the not-found path, use another slug