When Using Dynamic Routes in NextJS, bad routes return status 200

Question

I'm running the example in the NextJS Repo for dynamic routes that is at this URL:

When running the app and I browse to the URL:

http://localhost:3000/about

It works correctly and displays a good page with a status 200.

When I browse to http://localhost:3000/aboutBADROUTE

I get a 404 as I would expect.

However, this is the current correct route:

http://localhost:3000/post/first (returns 200)

But, this: http://localhost:3000/post/firstBADROUTE

also returns a 200 which is not what I want. I want that also to return a 404.

What am I misunderstanding?

Thanh Thanh · Accepted Answer · 2021-01-03T06:29:56

When you visit /about it returns 200 because you have /pages/about.js

When you visit /aboutBADROUTE, it returns 404 because you don't have any pages match that route.

When you visit /post/first or /post/firstBADROUTE, it will match this:

post/:id (so first or firstBADROUTE is still considered as id)

so it will always return 200 when you visit /post/whatevervalue.

In your case you can check if it is valid id you can show normal page, if it is invalid id, you can show error page (https://nextjs.org/docs/advanced-features/custom-error-page#reusing-the-built-in-error-page)