fix: 404 state

Author: VariableVic

src/app/(checkout)/not-found.tsx

@@ -0,0 +1,21 @@
+import { Metadata } from "next"
+import Link from "next/link"
+
+export const metadata: Metadata = {
+  title: "404",
+  description: "Something went wrong",
+}
+
+export default function NotFound() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[calc(100vh-64px)]">
+      <h1 className="text-2xl-semi text-gry-900">Page not found</h1>
+      <p className="text-small-regular text-gray-700">
+        The page you tried to access does not exist.
+      </p>
+      <Link href="/" className="mt-4 underline text-base-regular text-gray-900">
+        Go to frontpage
+      </Link>
+    </div>
+  )
+}

src/app/(main)/not-found.tsx

@@ -0,0 +1,21 @@
+import { Metadata } from "next"
+import Link from "next/link"
+
+export const metadata: Metadata = {
+  title: "404",
+  description: "Something went wrong",
+}
+
+export default function NotFound() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[calc(100vh-64px)]">
+      <h1 className="text-2xl-semi text-gry-900">Page not found</h1>
+      <p className="text-small-regular text-gray-700">
+        The page you tried to access does not exist.
+      </p>
+      <Link href="/" className="mt-4 underline text-base-regular text-gray-900">
+        Go to frontpage
+      </Link>
+    </div>
+  )
+}

src/modules/categories/templates/index.tsx

@@ -15,6 +15,7 @@ import React, { useEffect } from "react"
 import { useInView } from "react-intersection-observer"
 import Link from "next/link"
 import UnderlineLink from "@modules/common/components/underline-link"
+import { notFound } from "next/navigation"
 
 type CategoryTemplateProps = {
   categories: ProductCategoryWithChildren[]
@@ -27,6 +28,8 @@ const CategoryTemplate: React.FC<CategoryTemplateProps> = ({ categories }) => {
   const category = categories[categories.length - 1]
   const parents = categories.slice(0, categories.length - 1)
 
+  if (!category) notFound()
+
   const {
     data: infiniteData,
     hasNextPage,