Add custom 404 pages 🙈

app/lookup/[domain]/layout.tsx

@@ -1,5 +1,6 @@
 import { ExternalLinkIcon } from 'lucide-react';
 import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
 import { type FC, type ReactNode, Suspense } from 'react';
 
 import RelatedDomains from '@/components/RelatedDomains';
@@ -8,6 +9,7 @@ import SearchForm from '@/components/SearchForm';
 import WhoisQuickInfo, {
   WhoisQuickInfoPlaceholder,
 } from '@/components/WhoisQuickInfo';
+import isValidDomain from '@/utils/isValidDomain';
 
 type LookupLayoutProps = {
   children: ReactNode;
@@ -37,6 +39,10 @@ const LookupLayout: FC<LookupLayoutProps> = ({
   children,
   params: { domain },
 }) => {
+  if (!isValidDomain(domain)) {
+    return notFound();
+  }
+
   return (
     <>
       <div className="container mb-8 max-w-xl">

app/lookup/not-found.tsx

@@ -0,0 +1,12 @@
+import { type FC } from 'react';
+
+const LookupNotFound: FC = () => (
+  <div className="mt-12 flex flex-col items-center gap-2">
+    <h2>404 - Not Found</h2>
+    <p className="mt-2 text-center text-sm text-muted-foreground">
+      Not a valid domain
+    </p>
+  </div>
+);
+
+export default LookupNotFound;

app/not-found.tsx

@@ -0,0 +1,12 @@
+import { type FC } from 'react';
+
+const GlobalNotFound: FC = () => (
+  <div className="mt-12 flex flex-col items-center gap-2">
+    <h2>404 - Not Found</h2>
+    <p className="mt-2 text-center text-sm text-muted-foreground">
+      This page doesn&apos;t exist
+    </p>
+  </div>
+);
+
+export default GlobalNotFound;