Create 404 Page in Next.js with shadcn UI

In this tutorial, we will create 404 error page in next js with shadcn ui. First you need to setup next js with shadcn ui project.

Before use 404 not found page in next js with shadcn ui you need to install npx shadcn-ui add.

npx shadcn-ui@latest add

Create a Next.js 404 error page using shadcn-ui components (Card, CardContent, CardHeader, CardTitle) and next/link.

import Link from "next/link"

import { Button } from "@/components/ui/button"
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export default function NotFound() {
  return (
    <div className="flex items-center justify-center h-screen bg-blue-600">
      <Card className="w-[420px]">
        <CardHeader className="text-center">
          <CardTitle className="lg:text-7xl text-4xl">404</CardTitle>
          <CardDescription>
            The page you’re looking for doesn’t exist.
          </CardDescription>
        </CardHeader>
        <CardFooter className="flex justify-center">
          <Button asChild>
            <Link href="/">Go Back</Link>
          </Button>
        </CardFooter>
      </Card>
    </div>
  )
}

Aaronn