Move Pages to App Router

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);