From ec87b673855b9a4675cfc26379a2072fa48700b6 Mon Sep 17 00:00:00 2001 From: Stevan Freeborn <65925598+StevanFreeborn@users.noreply.github.com> Date: Thu, 20 Apr 2023 00:01:50 -0500 Subject: [PATCH] feat: add catch all route and pages for 404 and 500 errors --- next.config.js | 1 - src/app/[...not_found]/page.tsx | 5 +++++ src/app/error.module.css | 17 +++++++++++++++++ src/app/error.tsx | 20 ++++++++++++++++++++ src/app/global-error.tsx | 27 +++++++++++++++++++++++++++ src/app/layout.tsx | 2 +- src/app/not-found.tsx | 15 +++++++++++++++ 7 files changed, 85 insertions(+), 2 deletions(-) create mode 100644 src/app/[...not_found]/page.tsx create mode 100644 src/app/error.module.css create mode 100644 src/app/error.tsx create mode 100644 src/app/global-error.tsx create mode 100644 src/app/not-found.tsx diff --git a/next.config.js b/next.config.js index 36e18e3..4436b22 100644 --- a/next.config.js +++ b/next.config.js @@ -3,7 +3,6 @@ const nextConfig = { experimental: { appDir: true, }, - basePath: '/docs', }; module.exports = nextConfig; diff --git a/src/app/[...not_found]/page.tsx b/src/app/[...not_found]/page.tsx new file mode 100644 index 0000000..fd08563 --- /dev/null +++ b/src/app/[...not_found]/page.tsx @@ -0,0 +1,5 @@ +import { notFound } from 'next/navigation'; + +export default function Page() { + notFound(); +} diff --git a/src/app/error.module.css b/src/app/error.module.css new file mode 100644 index 0000000..0a348cc --- /dev/null +++ b/src/app/error.module.css @@ -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; +} \ No newline at end of file diff --git a/src/app/error.tsx b/src/app/error.tsx new file mode 100644 index 0000000..532a7fd --- /dev/null +++ b/src/app/error.tsx @@ -0,0 +1,20 @@ +'use client'; + +import styles from './error.module.css'; + +export default function GlobalError({ + error, + reset, +}: { + error: Error; + reset: () => void; +}) { + return ( +
+

Something went wrong!

+ reset()}> + Try again + +
+ ); +} diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx new file mode 100644 index 0000000..5960927 --- /dev/null +++ b/src/app/global-error.tsx @@ -0,0 +1,27 @@ +'use client'; + +import styles from './error.module.css'; + +export default function GlobalError({ + error, + reset, +}: { + error: Error; + reset: () => void; +}) { + return ( + + +
+

Something went wrong!

+ reset()} + > + Try again + +
+ + + ); +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 925ec4d..c1807c6 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -7,7 +7,7 @@ export const metadata = { icons: { icon: [ { - url: 'docs/images/favicon.ico', + url: '/images/favicon.ico', type: 'image/x-icon', }, ], diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx new file mode 100644 index 0000000..ff440a7 --- /dev/null +++ b/src/app/not-found.tsx @@ -0,0 +1,15 @@ +import Link from 'next/link.js'; +import styles from './error.module.css'; + +export default function Page() { + return ( +
+

+ Oops! The page you are trying to view does not exist +

+ + Go to the home page + +
+ ); +}