feat: add catch all route and pages for 404 and 500 errors

2023-04-20 00:01:50 -05:00
parent 149a2385f6
commit ec87b67385
7 changed files with 85 additions and 2 deletions
@@ -0,0 +1,5 @@
+import { notFound } from 'next/navigation';
+
+export default function Page() {
+  notFound();
+}
@@ -0,0 +1,17 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  width: 100vw;
+}
+
+.navLink {
+  text-decoration: none;
+  color: #64adac;
+  font-weight: bold;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
@@ -0,0 +1,20 @@
+'use client';
+
+import styles from './error.module.css';
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) {
+  return (
+    <div className={styles.container}>
+      <h2>Something went wrong!</h2>
+      <a className={styles.navLink} onClick={() => reset()}>
+        Try again
+      </a>
+    </div>
+  );
+}
@@ -0,0 +1,27 @@
+'use client';
+
+import styles from './error.module.css';
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <div className={styles.container}>
+          <h2>Something went wrong!</h2>
+          <a
+            className={styles.navLink}
+            onClick={() => reset()}
+          >
+            Try again
+          </a>
+        </div>
+      </body>
+    </html>
+  );
+}
@@ -7,7 +7,7 @@ export const metadata = {
  icons: {
    icon: [
      {
-        url: 'docs/images/favicon.ico',
+        url: '/images/favicon.ico',
        type: 'image/x-icon',
      },
    ],
@@ -0,0 +1,15 @@
+import Link from 'next/link.js';
+import styles from './error.module.css';
+
+export default function Page() {
+  return (
+    <div className={styles.container}>
+      <h1>
+        Oops! The page you are trying to view does not exist
+      </h1>
+      <Link className={styles.navLink} href="/">
+        Go to the home page
+      </Link>
+    </div>
+  );
+}