17 Added 404 page, added new icon for 404 page, added svg webpack loader

next.config.mjs

@@ -4,6 +4,13 @@ const nextConfig = {
   env: {
     APP_SERVER_URL: process.env.APP_SERVER_URL,
   },
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    });
+    return config;
+  }
 }
 
 export default nextConfig

package.json

@@ -26,6 +26,7 @@
     "@hookform/resolvers": "^3.3.4",
     "@percy/playwright": "^1.0.5",
     "@percy/sdk-utils": "^1.28.3",
+    "@svgr/webpack": "^8.1.0",
     "@tabler/icons-react": "^3.3.0",
     "axios": "^1.6.7",
     "daisyui": "^4.10.1",

src/app/[...not_found]/page.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import NotFoundIcon from '@/public/assets/icons/404.svg';
+import { useRouter } from 'next/navigation';
+
+export default function NotFoundPage() {
+  const router = useRouter();
+
+  return (
+    <div className="flex h-screen w-full items-center justify-center gap-4 p-4">
+      <div className="flex flex-col items-center justify-center gap-4">
+        <NotFoundIcon className="size-48" />
+        <p className="max-w-md text-center text-sm">
+          Looks like you`ve stumbled upon a page that`s playing hide and seek
+          with us. Don`t worry, it happens to the best of us. But fear not,
+          we`re here to help you get back on track!
+        </p>
+        <button onClick={() => router.push('/')} className="btn">
+          Go back home
+        </button>
+      </div>
+    </div>
+  );
+}