docs/app/not-found.tsx

import styles from "@/styles/Error.module.css";
import { SUPPORT_EMAIL_ADDRESS } from "@/utils/links";
import { Button } from "@mui/material";
import { headers } from "next/headers";
import { MdError } from "react-icons/md";

export const metadata = {
    title: "404 Not Found",
    description: "This page doesn't exist!",
};

export default function NotFound() {
    return (
        <main className={styles.main}>
            <h1 className="text-2xl md:text-3xl lg:text-4xl xl:text-5xl text-red-500 flex justify-center items-center gap-3">
                <MdError className="scale-[1.1]" />
                <span>404 Not Found</span>
            </h1>
            <h3 className="text-xl lg:text-3xl py-2">Page not found</h3>

            <p className="text-[#aaa] mt-5">
                The requested URL{" "}
                <span className="font-mono text-white font-bold">
                    {headers().get("x-invoke-url")}
                </span>{" "}
                was not found on this server. Are you sure the URL you&lsquo;ve
                tried to access is right?
            </p>
            <p className="text-[#aaa] mb-5">
                If you think this should not happen, then please contact the
                webmaster at{" "}
                <a href={`mailto:${SUPPORT_EMAIL_ADDRESS}`}>
                    {SUPPORT_EMAIL_ADDRESS}
                </a>
                .
            </p>

            <Button href="/">Go back to home page</Button>
        </main>
    );
}
1	rakinar2	575	import styles from "@/styles/Error.module.css";
2			import { SUPPORT_EMAIL_ADDRESS } from "@/utils/links";
3			import { Button } from "@mui/material";
4			import { headers } from "next/headers";
5			import { MdError } from "react-icons/md";
6
7			export const metadata = {
8	rakinar2	626	title: "404 Not Found",
9	rakinar2	575	description: "This page doesn't exist!",
10			};
11
12			export default function NotFound() {
13			return (
14			<main className={styles.main}>
15			<h1 className="text-2xl md:text-3xl lg:text-4xl xl:text-5xl text-red-500 flex justify-center items-center gap-3">
16			<MdError className="scale-[1.1]" />
17			<span>404 Not Found</span>
18			</h1>
19			<h3 className="text-xl lg:text-3xl py-2">Page not found</h3>
20
21			<p className="text-[#aaa] mt-5">
22			The requested URL{" "}
23			<span className="font-mono text-white font-bold">
24			{headers().get("x-invoke-url")}
25			</span>{" "}
26			was not found on this server. Are you sure the URL you‘ve
27			tried to access is right?
28			</p>
29			<p className="text-[#aaa] mb-5">
30			If you think this should not happen, then please contact the
31			webmaster at{" "}
32			<a href={`mailto:${SUPPORT_EMAIL_ADDRESS}`}>
33			{SUPPORT_EMAIL_ADDRESS}
34			</a>
35			.
36			</p>
37
38			<Button href="/">Go back to home page</Button>
39			</main>
40			);
41			}