Next.js Discord

Discord Forum

Return 404 response for unfound dynamic routes

Unanswered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
Feel like I'm really battling NextJS at the moment. I want to get true 404 errors from dynamic routes, which it seems I should do from using export const dynamicParams = false with generateStaticParams. This works nicely in dev mode, hitting a dynamic route that exists returns 200 response, and one that doesn't exist returns 404.

However, when I run a build as there's dynamic elements in the pages (e.g. headers and/or cookies) then not-found routes still return a 200 response. This isn't great for SEO having soft 404 pages, so have been desperately seeking a solution but everything I try doesn't work. And when I've stripped it back to remove headers and cookies then when I call revalidatePath to rebuild pages I get a 500 error on the server. Pretty painful experience. Has anyone found a workable solution for this?

6 Replies

Masai Lion
yeah since next js returns 404 if the page doesnt exist but 404 is a page thats why you are getting 200 😄
what i did to solve this since ive build my custom headless cms and i have a post man clone (playground section) where you can make requests to w/e you want just to find out about all this 404-200 stuff, is i made a not-found.tsx in the root dir(app) with this inside 
 import { redirect } from "next/navigation";

export default async function NotFound() {
 
  redirect("/api/not-found");

}
then in my /api/not-found/route.ts i did this 
 import { NextResponse, NextRequest } from 'next/server';


export async function GET (request: NextRequest) {
  
    return NextResponse.json({ message: 'Not found' }, { status: 404 })
}

export async function POST (request: NextRequest) {
  
    return NextResponse.json({ message: 'Not found' }, { status: 404 })
}

export async function PUT (request: NextRequest) {
  
    return NextResponse.json({ message: 'Not found' }, { status: 404 })
}

export async function PATCH (request: NextRequest) {
  
    return NextResponse.json({ message: 'Not found' }, { status: 404 })
}

export async function DELETE (request: NextRequest) {
  
    return NextResponse.json({ message: 'Not found' }, { status: 404 })
}
a bit of a hack but it worked 🙂
i think you can customise it even more to check the request headers ( if its a browser to return the wanted 404 page ) and if its not 404 status from the api
Asiatic LionOP
I don't think that's the reason though. Adding dynamicParams = false and generateStaticParams and ensuring the page is statically rendered will return a 404 status for an unfound page (and NotFound() in Next will also return a 404 response if the page does not stream). The reason it returns a 200 status is due to the streaming process in the response (i.e. it returns a 200 straight away, before there's any awareness of whether there's content there or not).

This all seems a bit weird though in the case of generateStaticParams though as Next does know in advance whether a page exists or not, but if the page is dynamically rendered (e.g. something accesses headers) then it will try regardless of any other settings to resolve the page before returning a not-found page with a 200 status. I'm finding this super frustrating. What I really want is to use generateStaticParams with dynamicParams = false and not care whether the page is dynamic or static
Asiatic LionOP
Thanks for the response though @Masai Lion, I've come the conclusion that it's actually going to be easier to do this in CDN rather than Next. Just doesn't seem to be possible unfortunately
Masai Lion
No issues mate 😉 sad I couldn't help ya more