Move Pages to App Router (#7)

Fixes #6

1. Move all pages to
[`[locale]`](https://next-intl-docs.vercel.app/docs/getting-started/app-router/with-i18n-routing#getting-started)
folder
2. Add
[`generateMetata()`](https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function)
function and [next-intl
`getTranslations()`](https://next-intl-docs.vercel.app/docs/environments/metadata-route-handlers#metadata-api)
implementation
* @rylew1 commented we could remove this from each page. To do that we
could use [prop
arguments](https://nextjs.org/docs/app/api-reference/functions/generate-metadata#with-segment-props)
and update the based on the param. There is also more we can do with the
metadata to properly add [app links and twitter
cards](https://nextjs.org/docs/app/api-reference/functions/generate-metadata#applinks).
TODO: create ticket
4. Replace i18n's `useTranslation` with next-intl's `useTranslations`
5. Remove hard-coded strings that were present b/c we were still b/w
i18next and next-intl

* [Move process page to
app](32ba4ee)

* [Move research page to
app](5b5ad1a)

* [Move health page to
app](a3e6255)

* [Move feature flag page to
app](395baed)
* [Move search page to app
router](1e261e3)
* [Move newsletter pages to app
router](b509ef8)
* [Move home page to app
router](de1be98)
* [Move home page to app
router](74077ae)
* [Move 404 page to app
router](ccbc956)

1. [Delete hello
api](5bad6ea)
     * This was left from the project creation
2. [Add USWDS icon
component](0120c7b)
* as noted in a slack discussion, when trying to access [one of the
icons](https://github.com/trussworks/react-uswds/blob/main/src/components/Icon/Icons.ts)
using `<Icon.Search/>` next errors: `You cannot dot into a client module
from a server component. You can only pass the imported name through`.
I'm not sure why it thinks the Icon component is a client module. [Dan
A.
suggests](vercel/next.js#51593 (comment))
trussworks should re-export as named exports. I tried importing the SVGs
directly from the trussworks library but [svgr requires a custom webpack
config](https://react-svgr.com/docs/next/) which is a road I didn't want
to go down and [react svg](https://www.npmjs.com/package/react-svg)
through an error in the app router 😥 .
* I implemented @sawyerh 's
[suggestion](0120c7b#diff-dadb35bd2f3f61f2c179f033cd0a2874fc343974236f2fb8613664703c751429),
which did not work initially b/c next reported the USWDS icon was
corrupt, which was fixed by adding a `viewBox` to the svg element 😮‍💨 .
* [Remove unused
WtGIContent](75490f7)

* [Move layout and update for app
router](af112fd)

* [Update global components for the app
router](40119e6)

* [Move i18n strings for app
router](eb3c07c)

* [Adds next-intl config and removes
i18n](c546571)

* [Update tests for app
router](3b9b193)

* [Removes i18next and next-i18n
packages](9d2e08a)

* [Update storybook settings for app
router](39f115d)

frontend/.storybook/I18nStoryWrapper.tsx

@@ -0,0 +1,30 @@
+/**
+ * @file Storybook decorator, enabling internationalization for each story.
+ * @see https://storybook.js.org/docs/writing-stories/decorators
+ */
+import { StoryContext } from "@storybook/react";
+
+import { NextIntlClientProvider } from "next-intl";
+import React from "react";
+
+import { defaultLocale, formats, timeZone } from "../src/i18n/config";
+
+const I18nStoryWrapper = (
+  Story: React.ComponentType,
+  context: StoryContext,
+) => {
+  const locale = (context.globals.locale as string) ?? defaultLocale;
+
+  return (
+    <NextIntlClientProvider
+      formats={formats}
+      timeZone={timeZone}
+      locale={locale}
+      messages={context.loaded.messages as undefined}
+    >
+      <Story />
+    </NextIntlClientProvider>
+  );
+};
+
+export default I18nStoryWrapper;

frontend/.storybook/main.js

@@ -25,11 +25,7 @@ function blockSearchEnginesInHead(head) {
  */
 const config = {
   stories: ["../stories/**/*.stories.@(mdx|js|jsx|ts|tsx)"],
-  addons: [
-    "@storybook/addon-essentials",
-    "storybook-react-i18next",
-    "@storybook/addon-designs",
-  ],
+  addons: ["@storybook/addon-essentials", "@storybook/addon-designs"],
   framework: {
     name: "@storybook/nextjs",
     options: {

frontend/.storybook/preview.tsx

@@ -0,0 +1,64 @@
+/**
+ * @file Setup the toolbar, styling, and global context for each Storybook story.
+ * @see https://storybook.js.org/docs/configure#configure-story-rendering
+ */
+import { Loader, Preview } from "@storybook/react";
+
+import "../src/styles/styles.scss";
+
+import { defaultLocale, locales } from "../src/i18n/config";
+import { getMessagesWithFallbacks } from "../src/i18n/getMessagesWithFallbacks";
+import I18nStoryWrapper from "./I18nStoryWrapper";
+
+const parameters = {
+  nextjs: {
+    appDirectory: true,
+  },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  options: {
+    storySort: {
+      method: "alphabetical",
+      order: [
+        "Welcome",
+        "Core",
+        // Storybook infers the title when not explicitly set, but is case-sensitive
+        // so we need to explicitly set both casings here for this to properly sort.
+        "Components",
+        "components",
+        "Templates",
+        "Pages",
+        "pages",
+      ],
+    },
+  },
+};
+
+const i18nMessagesLoader: Loader = async (context) => {
+  const messages = await getMessagesWithFallbacks(
+    context.globals.locale as string,
+  );
+  return { messages };
+};
+
+const preview: Preview = {
+  loaders: [i18nMessagesLoader],
+  decorators: [I18nStoryWrapper],
+  parameters,
+  globalTypes: {
+    locale: {
+      description: "Active language",
+      defaultValue: defaultLocale,
+      toolbar: {
+        icon: "globe",
+        items: locales,
+      },
+    },
+  },
+};
+
+export default preview;

frontend/jest.config.js

@@ -9,10 +9,7 @@ const createJestConfig = nextJest({
 // Add any custom config to be passed to Jest
 /** @type {import('jest').Config} */
 const customJestConfig = {
-  setupFilesAfterEnv: [
-    "<rootDir>/tests/jest.setup.js",
-    "<rootDir>/tests/jest-i18n.ts",
-  ],
+  setupFilesAfterEnv: ["<rootDir>/tests/jest.setup.js"],
   testEnvironment: "jsdom",
   // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
   moduleDirectories: ["node_modules", "<rootDir>/"],

frontend/next.config.js

@@ -1,5 +1,5 @@
 // @ts-check
-const { i18n } = require("./next-i18next.config");
+
 const withNextIntl = require("next-intl/plugin")("./src/i18n/server.ts");
 const sassOptions = require("./scripts/sassOptions");
 
@@ -16,17 +16,11 @@ const appSassOptions = sassOptions(basePath);
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   basePath,
-  i18n,
   reactStrictMode: true,
   // Output only the necessary files for a deployment, excluding irrelevant node_modules
   // https://nextjs.org/docs/app/api-reference/next-config-js/output
   output: "standalone",
   sassOptions: appSassOptions,
-  transpilePackages: [
-    // Continue to support older browsers (ES5)
-    // https://github.com/i18next/i18next/issues/1948
-    "i18next",
-  ],
 };
 
 module.exports = withNextIntl(nextConfig);