show the page code

This is the file

src/pages/404.js

import { Typography, Box } from "@mui/material";
export default function Custom404() {
  return (
    <>
      <Box>
        <Typography>CUSTOM ERROR</Typography>
     </Box>
    </>
  );
}

It works on src/app/not-found.js

But i want to make it work on src/pages/404.js

did you chose app router or pages when creating the app?

Its already been some time. I forgot it. How can i check it

because currently im putting my files on /pages folder

is your globals.css inside the app folder?

Yes

then I assume it's app folder

might be an obscure thing that wasn't taken into account altough using both app and pages folder at the same time works for most of the stuff

as i researched. I think its possible to either use app or page router. The issue im getting is that the custom 404 page is not working on src/pages/404.js

I just tried it too and it didn't work either

yes, it is expected because if you have app/not-found.tsx. next will use it over page/404.tsx

you can use both router, but next will choose to use the not-found page in app router over the 404 in page router

Can you give me the url for this one as a reference.

Is it possible to still use page/404.js ? How ? @Ray

Why would you need to use it?

Because it has been the setup of my project to use pages folder

Then why you have a app/not-found?

I created the app/not-found.js as a solution. But client wants to use pages/404.js

I think, the project have select to use app router upon creating the project

remove app folder if you want to use page/404

Ill try