custom error pages

pages/404.js

@@ -0,0 +1,12 @@
+import Image from 'next/image'
+import LayoutCenter from '../components/layout-center'
+import styles from '../styles/404.module.css'
+
+export default function fourZeroFour () {
+  return (
+    <LayoutCenter>
+      <Image width='500' height='376' src='/maze.gif' />
+      <h1 className={styles.fourZeroFour}><span>404</span><span className={styles.notFound}>page not found</span></h1>
+    </LayoutCenter>
+  )
+}

pages/500.js

@@ -0,0 +1,12 @@
+import Image from 'next/image'
+import LayoutCenter from '../components/layout-center'
+import styles from '../styles/404.module.css'
+
+export default function fourZeroFour () {
+  return (
+    <LayoutCenter>
+      <Image width='500' height='375' src='/falling.gif' />
+      <h1 className={styles.fourZeroFour}><span>500</span><span className={styles.notFound}>server error</span></h1>
+    </LayoutCenter>
+  )
+}

styles/404.module.css

@@ -0,0 +1,13 @@
+.fourZeroFour {
+    font-family: 'lightning';
+    font-size: 96px;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    margin-top: 1rem;
+    width: 100%;
+}
+
+.notFound {
+    font-size: 24px;
+}