Not Found Page is Next.js

Today in this blog i am gonna tell how to build one general component in your Next.js project for any user if they try to visit a route which doesn’t exists

First of all go to your src/app/ of your next.js project folder

On the same level of layout.tsx and page.tsx create a another file named not-found.tsx make sure that name of the file should be exactly ‘not-found.tsx’

Now just treat it as a normal component just write the code for what you want to show when someone visits for example here is my sample component

"use client";

import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button"; 

export default function NotFound() {
  const router = useRouter();

  return (
    <div className="flex flex-col items-center justify-center h-screen text-center bg-gray-50 text-gray-800">
      <h1 className="text-5xl font-bold mb-4">404 😅</h1>
      <p className="text-xl mb-2">Yaha kuch nahi hai!</p>
      <p className="text-sm text-gray-500 mb-6">
        Page not found for <strong>myproject</strong>.
      </p>
      <Button
        onClick={() => router.push("/")}
        className="rounded-full px-6 py-2 text-sm font-semibold bg-blue-600 hover:bg-blue-700 text-white transition"
      >
        Go Back Home
      </Button>
    </div>
  );
}