How to Show 404 Page for Invalid Routes in dynamic routes ?

Answered

Bigeye scad posted this in #help-forum

Bigeye scadOP

2025-02-24T11:39:23.403Z

I have pages only for specific routes like /education, /comics, and /books. If someone visits an invalid route like /note, I want it to show the 404 page. I already have a 404.js file. How can I make this work?

Answered by LuisLl

Even if you have that not-found.js file you’ll still render the page on demand for “/note”.

Unless you define generateStaticParams() that returns the params for pages you do want: [ {slug : “education”}, { slug : “comics” }, …. ] and export const dynamicParams = false, to avoid generating new on demand like “/note”.

View full answer

18 Replies

@Bigeye scad I have pages only for specific routes like /education, /comics, and /books. If someone visits an invalid route like /note, I want it to show the 404 page. I already have a 404.js file. How can I make this work?

B33fb0n3

2025-02-24T12:04:33.300Z

When you working inside the app router, then you don't need a 404.js. You need a "not-found.js" to make it work ([read more](https://nextjs.org/docs/app/api-reference/file-conventions/not-found))

LuisLl

2025-02-24T14:40:34.729Z

Answer

Bigeye scadOP

2025-02-25T07:22:39.893Z

Thank you

@LuisLl is there any way to handle it in client side?

@Bigeye scad <@744377057139753020> is there any way to handle it in client side?

B33fb0n3

2025-02-25T07:37:08.288Z

no, it can only run in server context

@B33fb0n3 When you working inside the app router, then you don't need a 404.js. You need a "not-found.js" to make it work ([read more](https://nextjs.org/docs/app/api-reference/file-conventions/not-found))

Dwarf Crocodile

2025-02-25T12:53:17.446Z

Hey, i made a [...not-found] folder in app directory, and made a custom 404 component inside it's page.jsx.

is this approach good?

something like:

import React from "react";

const Custom404 = () => {
  return (
    <div className="...">
            Not Found
    </div>
  );
};

export default Custom404;