Move 404 page to app router

frontend/src/app/not-found.tsx

@@ -1,12 +1,23 @@
-import BetaAlert from "src/components/AppBetaAlert";
+import BetaAlert from "src/components/BetaAlert";
 import { GridContainer } from "@trussworks/react-uswds";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
-import { unstable_setRequestLocale } from "next-intl/server";
+import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
+import { Metadata } from "next";
+
+export async function generateMetadata() {
+  const t = await getTranslations({ locale: "en" });
+  const meta: Metadata = {
+    title: t("ErrorPages.page_not_found.title"),
+    description: t("Index.meta_description"),
+  };
+  return meta;
+}
 
 export default function NotFound() {
   unstable_setRequestLocale("en");
   const t = useTranslations("ErrorPages.page_not_found");
+
   return (
     <>
       <BetaAlert />

frontend/stories/pages/404.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta } from "@storybook/react";
-import PageNotFound from "src/pages/404";
+import PageNotFound from "src/app/not-found";
 
 const meta: Meta<typeof PageNotFound> = {
   title: "Pages/404",

frontend/tests/e2e/404.spec.ts

@@ -0,0 +1,20 @@
+/* eslint-disable testing-library/prefer-screen-queries */
+import { test, expect } from "@playwright/test";
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("/imnothere");
+});
+
+test.afterEach(async ({ context }) => {
+  await context.close();
+});
+
+test("has title", async ({ page }) => {
+  await expect(page).toHaveTitle("Oops! Page Not Found");
+});
+
+test("can view the home button", async ({ page }) => {
+  await expect(page.getByRole("link", { name: "Return Home" })).toHaveText(
+    "Return Home",
+  );
+});