DocsDeveloper

404 Handling

Overview

In Next.js, handling 404 errors involves creating a custom error page that is displayed when a user navigates to a URL that does not exist within the application. This custom error page provides a user-friendly message informing the user that the requested page could not be found and typically includes options for navigating back to the home page or other relevant sections of the site.


Demo

Oops!
It seems you're lost in cyberspace...
Take me home
404 error message

Easy CLI Install

jrui create not-found

If you'd like to have the reveal component for the animations you can run the following command as well. Otherwise, remove the reveal import from the 'not-found.tsx' file.

Easy CLI Install

jrui add reveal

Component File

app > not-found.tsx

import Link from "next/link";
import React from "react";
import Image from "next/image";
import Error from "@/imgs/404.png";
import Reveal from "@/components/Reveal";

const NotFoundPage = () => {
return (
    <Reveal className="center flex-col h-full mt-10">
    <Reveal
        delay={0.2}
        className="text-4xl text-primary font-bold text-center mb-4"
    >
        Oops!
    </Reveal>
    <Reveal delay={0.4} className="text-2xl font-semibold text-center mb-4">
        It seems you're lost in cyberspace...
    </Reveal>
    <Reveal delay={0.6} className="text-lg text-center mb-4">
        <div className="btn-hover border-gradient px-4 py-2">
        <Link href="/">Take me home</Link>
        </div>
    </Reveal>
    <Reveal delay={0.8}>
        <Image width={500} src={Error} alt="404 error message" />
    </Reveal>
    </Reveal>
);
};

export default NotFoundPage;
Prev: Next: