Instead of just displaying a 404 error, the entire page’s colors are inverted, making the screen look very strange. This happens every time I navigate to a non-existent page.
Image of Normal Layout with White Background
Image of Unexpected Layout with Black Background (on 404 error)
I’m developing a website using Next.js and Tailwind CSS. I haven’t created a custom 404 page yet, but when I navigate to a non-existent page, the entire screen’s colors get inverted.
I’m unsure why this is happening and would appreciate any guidance on how to resolve this issue.
Additional Information:
-
Next.js version: 14.2.8
-
Tailwind CSS version: 3.4.1
-
The issue occurs when navigating to a non-existent page.
Could this be related to any default settings or behavior of the 404 page in Next.js?
2
I see the issue,
It can be fixed by adding your custom not-found.tsx file and return your custom jsx.
more about not found file:
https://nextjs.org/docs/app/api-reference/file-conventions/not-found
1