Adding 404 with Layout

pages/404.tsx

@@ -0,0 +1,35 @@
+import type { GetStaticPropsContext } from 'next'
+import commerce from '@lib/api/commerce'
+import { Layout } from '@components/common'
+import { Text } from '@components/ui'
+
+export async function getStaticProps({
+  preview,
+  locale,
+  locales,
+}: GetStaticPropsContext) {
+  const config = { locale, locales }
+  const { pages } = await commerce.getAllPages({ config, preview })
+  const { categories, brands } = await commerce.getSiteInfo({ config, preview })
+  return {
+    props: {
+      pages,
+      categories,
+      brands,
+    },
+    revalidate: 200,
+  }
+}
+
+export default function NotFound() {
+  return (
+    <div className="max-w-2xl mx-8 sm:mx-auto py-20 flex flex-col items-center justify-center fit">
+      <Text variant="heading">Not Found</Text>
+      <Text className="">
+        The requested page doesn't exist or you don't have access to it.
+      </Text>
+    </div>
+  )
+}
+
+NotFound.Layout = Layout