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	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	title: "404 Not Found",
9	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	}