Convert '404' page to App Router [#134]

Also updates the 404 content test to match the new behavior of not
returning the full page.

Note: file renaming (`404.jsx` -> `not-found.tsx`) is because Next.js
App Router requires the latter name.

Note: old `pages/404.jsx` and `src/pages/404.jsx` are left in place
because the `ListResources` component depends on the `ErrorContainer`
style being exported from them. This will be addressed in a subsequent
commit.

static-site/app/not-found.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+import styles from "./styles/not-found.module.css";
+
+export default function FourOhFour(): React.ReactElement {
+  return (
+    <>
+      <div className={styles.errorContainer}>
+        Oops - that page doesn’t exist! (404).
+        <br />
+        Maybe start again with <a href="/">our main page</a>?
+      </div>
+    </>
+  );
+}

static-site/app/styles/globals.css

@@ -15,6 +15,7 @@
 
   --blue: #5097ba;
   --darkGrey: #333;
+  --errorRed: #DE3C26;
   --mediumGrey: #888;
   --lightGrey: #ccc;
 

static-site/app/styles/not-found.module.css

@@ -0,0 +1,15 @@
+.errorContainer {
+  color: var(--errorRed);
+  font-size: 28px;
+  font-weight: 300;
+  line-height: calc(1.4 * var(--niceLineHeight));
+  margin: 0 auto;
+  max-width: 640px;
+  padding: 130px 0 80px;
+  text-align: center;
+}
+
+.errorContainer a {
+  color: var(--errorRed);
+  text-decoration: underline;
+}

test/requests.test.js

@@ -328,7 +328,7 @@ function testBase404Page(path) {
     the 404 page, but nextstrain.org without JS is not feasible */
     test("body looks like 404 page", async () => {
       const res = await req;
-      expect((await res.text()).includes('"page":"/404"')).toBe(true)
+      expect((await res.text()).includes("Oops - that page doesn’t exist!")).toBe(true)
     });
   });
 }