Upgrade to Next.js@15 and React@19

This upgrades Next.js by running `npx @next/codemod@canary upgrade latest`,
which also runs `npx codemod@latest react/19/migration-recipe`.

Additional manual changes I had to do:

1. Disable Turbopack in dev mode.
It wasn't clear to me how to use raw-loader to load .ftl files, so I postponed
that for later.

2. Turned `getExperimentationId` into an async function.

I did this because it calls `headers()`, which is async now. All its invocations
where in async functions anyway.

3. Server components should now pass the accept language to get l10n

In most environments, getL10n() and getL10nBundles() can be synchronous
functions, and just read the language preferences directly. However, on the
server-side, reading the headers is now asynchronous. Thus, I've modified the
l10n generation functions to require the accept language argument if no sync
function can be provided that returns it. Not great, but better than forcing the
same functions in e.g. client components to be async.

An alternative would have been to simply make the getL10n() and getL10nBundles()
functions asynchronous for the server, but I imagine that would be even more
confusing than just making an optional argument required.

4. Dynamically import react-dom/server(.edge)

In `/src/emails/renderEmail`, we _want_ to render HTML to a string, rather than
generating a server component that the server serves, but Next.js throws an
error if we do that directly. Hence, I had to replace that with a dynamic import
as a workaround, turning `renderEmail` into an async function.

Additionally, I got errors in the tests when not importing it from
.edge.

5. Move `serverExternalPackages` out of `experimental`

Author: Vinnl

jest.setup.ts

@@ -40,6 +40,22 @@ global.IntersectionObserver = jest.fn();
 defaultFallbackInView(false);
 beforeEach(() => {
   setupIntersectionMocking(jest.fn);
+
+  // react-dom/server.edge is apparently needed instead of react-dom/server
+  // to avoid this error:
+  // > Uncaught ReferenceError: MessageChannel is not defined
+  // See https://github.com/jsdom/jsdom/issues/2448#issuecomment-1581009331
+  window.MessageChannel = jest.fn().mockImplementation(() => {
+    return {
+      port1: {
+        postMessage: jest.fn(),
+      },
+      port2: {
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+      },
+    };
+  });
 });
 afterEach(() => {
   resetIntersectionMocking();

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.js

@@ -175,13 +175,9 @@ const nextConfig = {
 
     return config;
   },
-  experimental: {
-    // Without this setting, Next.js has Webpack trying and failing to load
-    // uglify-js when compiling MJML email templates to HTML in `renderEmail.ts`:
-    serverComponentsExternalPackages: ["mjml"],
-    // Sentry 8.x requires `instrumentation.ts` vs. it's previous custom approach.
-    instrumentationHook: true,
-  },
+  // Without this setting, Next.js has Webpack trying and failing to load
+  // uglify-js when compiling MJML email templates to HTML in `renderEmail.ts`:
+  serverExternalPackages: ["mjml"],
 };
 
 const sentryOptions = {

package-lock.json

@@ -80,32 +80,32 @@
     "@grpc/grpc-js": "1.12.2",
     "@leeoniya/ufuzzy": "^1.0.17",
     "@mozilla/glean": "^5.0.3",
-    "@next/third-parties": "^14.2.15",
+    "@next/third-parties": "15.1.4",
     "@sentry/nextjs": "^8.48.0",
     "@sentry/node": "^8.0.0",
     "@sentry/utils": "^8.48.0",
     "@stripe/stripe-js": "^5.5.0",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^22.10.5",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "19.0.3",
+    "@types/react-dom": "19.0.2",
     "canvas-confetti": "^1.9.3",
     "dotenv-flow": "^4.1.0",
-    "eslint-config-next": "^14.2.15",
+    "eslint-config-next": "15.1.4",
     "ioredis": "^5.4.2",
     "jsdom": "^25.0.1",
     "jsonwebtoken": "^9.0.2",
     "jwk-to-pem": "^2.0.7",
     "knex": "^3.1.0",
     "mjml": "^4.15.3",
-    "next": "^14.2.22",
+    "next": "15.1.4",
     "next-auth": "^4.24.11",
     "nodemailer": "^6.9.16",
     "pg": "^8.13.1",
-    "react": "^18.3.1",
+    "react": "19.0.0",
     "react-aria": "^3.36.0",
     "react-cookie": "^7.2.2",
-    "react-dom": "^18.3.1",
+    "react-dom": "19.0.0",
     "react-intersection-observer": "^9.15.1",
     "react-stately": "^3.34.0",
     "react-toastify": "^11.0.2",
@@ -166,5 +166,9 @@
     "tsx": "^4.19.2",
     "typescript": "^5.7.3",
     "yaml": "^2.7.0"
+  },
+  "overrides": {
+    "@types/react": "19.0.3",
+    "@types/react-dom": "19.0.2"
   }
 }

package.json

@@ -10,7 +10,10 @@ import { renderEmail } from "../../../../../../emails/renderEmail";
 import { VerifyEmailAddressEmail } from "../../../../../../emails/templates/verifyEmailAddress/VerifyEmailAddressEmail";
 import { sanitizeSubscriberRow } from "../../../../../functions/server/sanitize";
 import { getServerSession } from "../../../../../functions/server/getServerSession";
-import { getL10n } from "../../../../../functions/l10n/serverComponents";
+import {
+  getAcceptLangHeaderInServerComponents,
+  getL10n,
+} from "../../../../../functions/l10n/serverComponents";
 import { getSubscriberByFxaUid } from "../../../../../../db/tables/subscribers";
 import { ReactNode } from "react";
 import { SubscriberRow } from "knex/types/tables";
@@ -80,7 +83,7 @@ async function send(
   return sendEmail(
     emailAddress,
     "Test email: " + subject,
-    renderEmail(template),
+    await renderEmail(template),
   );
 }
 
@@ -90,7 +93,8 @@ export async function triggerSignupReportEmail(emailAddress: string) {
     return false;
   }
 
-  const l10n = getL10n();
+  const acceptLangHeader = await getAcceptLangHeaderInServerComponents();
+  const l10n = getL10n(acceptLangHeader);
   const breaches = await getBreachesForEmail(
     getSha1(emailAddress),
     await getBreaches(),
@@ -115,7 +119,8 @@ export async function triggerVerificationEmail(emailAddress: string) {
     return false;
   }
 
-  const l10n = getL10n();
+  const acceptLangHeader = await getAcceptLangHeaderInServerComponents();
+  const l10n = getL10n(acceptLangHeader);
   await send(
     emailAddress,
     l10n.getString("email-subject-verify"),
@@ -135,7 +140,8 @@ export async function triggerMonthlyActivityFree(emailAddress: string) {
     return false;
   }
 
-  const l10n = getL10n();
+  const acceptLangHeader = await getAcceptLangHeaderInServerComponents();
+  const l10n = getL10n(acceptLangHeader);
 
   if (typeof subscriber.onerep_profile_id === "number") {
     await refreshStoredScanResults(subscriber.onerep_profile_id);
@@ -148,7 +154,7 @@ export async function triggerMonthlyActivityFree(emailAddress: string) {
     latestScan.results,
     await getSubscriberBreaches({
       fxaUid: session.user.subscriber?.fxa_uid,
-      countryCode: getCountryCode(headers()),
+      countryCode: getCountryCode(await headers()),
     }),
   );
 
@@ -174,7 +180,8 @@ export async function triggerMonthlyActivityPlus(emailAddress: string) {
     return false;
   }
 
-  const l10n = getL10n();
+  const acceptLangHeader = await getAcceptLangHeaderInServerComponents();
+  const l10n = getL10n(acceptLangHeader);
 
   if (typeof subscriber.onerep_profile_id === "number") {
     await refreshStoredScanResults(subscriber.onerep_profile_id);
@@ -187,7 +194,7 @@ export async function triggerMonthlyActivityPlus(emailAddress: string) {
     latestScan.results,
     await getSubscriberBreaches({
       fxaUid: session.user.subscriber?.fxa_uid,
-      countryCode: getCountryCode(headers()),
+      countryCode: getCountryCode(await headers()),
     }),
   );
 
@@ -212,7 +219,8 @@ export async function triggerBreachAlert(
     return false;
   }
 
-  const l10n = getL10n();
+  const acceptLangHeader = await getAcceptLangHeaderInServerComponents();
+  const l10n = getL10n(acceptLangHeader);
 
   const assumedCountryCode = getSignupLocaleCountry(subscriber);
 
@@ -260,7 +268,8 @@ export async function triggerBreachAlert(
 }
 
 export async function triggerFirstDataBrokerRemovalFixed(emailAddress: string) {
-  const l10n = getL10n();
+  const acceptLangHeader = await getAcceptLangHeaderInServerComponents();
+  const l10n = getL10n(acceptLangHeader);
   const randomScanResult = createRandomScanResult({ status: "removed" });
 
   await send(

src/app/(proper_react)/(redesign)/(authenticated)/admin/emails/actions.tsx

@@ -8,16 +8,18 @@ import { isAdmin } from "../../../../../api/utils/auth";
 import { NoResults, Removals } from "./Removals";
 import { getStuckRemovals } from "../../../../../functions/server/getStuckRemovals";
 
-export default async function Page({
-  searchParams: { page = "1", days = "30", perPage = "100" },
-}: {
-  searchParams: {
+export default async function Page(props: {
+  searchParams: Promise<{
     query?: string;
     page: string;
     days: string;
     perPage: string;
-  };
+  }>;
 }) {
+  const searchParams = await props.searchParams;
+
+  const { page = "1", days = "30", perPage = "100" } = searchParams;
+
   const session = await getServerSession();
 
   if (!isAdmin(session?.user?.email || "")) {

src/app/(proper_react)/(redesign)/(authenticated)/admin/removals/page.tsx

@@ -41,22 +41,27 @@ import { getExperimentationId } from "../../../../../../../functions/server/getE
 import { getElapsedTimeInDaysSinceInitialScan } from "../../../../../../../functions/server/getElapsedTimeInDaysSinceInitialScan";
 import { getExperiments } from "../../../../../../../functions/server/getExperiments";
 import { getLocale } from "../../../../../../../functions/universal/getLocale";
-import { getL10n } from "../../../../../../../functions/l10n/serverComponents";
+import {
+  getAcceptLangHeaderInServerComponents,
+  getL10n,
+} from "../../../../../../../functions/l10n/serverComponents";
 import { getDataBrokerRemovalTimeEstimates } from "../../../../../../../functions/server/getDataBrokerRemovalTimeEstimates";
 
 const dashboardTabSlugs = ["action-needed", "fixed"];
 
 type Props = {
-  params: {
+  params: Promise<{
     slug: string[] | undefined;
-  };
-  searchParams: {
+  }>;
+  searchParams: Promise<{
     nimbus_preview?: string;
     dialog?: "subscriptions";
-  };
+  }>;
 };
 
-export default async function DashboardPage({ params, searchParams }: Props) {
+export default async function DashboardPage(props: Props) {
+  const searchParams = await props.searchParams;
+  const params = await props.params;
   const session = await getServerSession();
   if (!checkSession(session) || !session?.user?.subscriber?.id) {
     return redirect("/auth/logout");
@@ -74,7 +79,7 @@ export default async function DashboardPage({ params, searchParams }: Props) {
     return redirect(`/user/dashboard/${defaultTab}`);
   }
 
-  const headersList = headers();
+  const headersList = await headers();
   const countryCode = getCountryCode(headersList);
 
   const profileId = await getOnerepProfileId(session.user.subscriber.id);
@@ -125,11 +130,11 @@ export default async function DashboardPage({ params, searchParams }: Props) {
   });
   const userIsEligibleForPremium = isEligibleForPremium(countryCode);
 
-  const experimentationId = getExperimentationId(session.user);
+  const experimentationId = await getExperimentationId(session.user);
   const experimentData = await getExperiments({
     experimentationId: experimentationId,
     countryCode: countryCode,
-    locale: getLocale(getL10n()),
+    locale: getLocale(getL10n(await getAcceptLangHeaderInServerComponents())),
     previewMode: searchParams.nimbus_preview === "true",
   });
 

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/[[...slug]]/page.tsx

@@ -42,7 +42,7 @@ export default async function AutomaticRemovePage() {
     email: session.user.email,
   });
 
-  const countryCode = getCountryCode(headers());
+  const countryCode = getCountryCode(await headers());
   const profileId = await getOnerepProfileId(session.user.subscriber.id);
   const scanData = await getScanResultsWithBroker(
     profileId,

src/app/(proper_react)/(redesign)/(authenticated)/user/(dashboard)/dashboard/fix/data-broker-profiles/automatic-remove/page.tsx

@@ -26,7 +26,7 @@ export default async function ManualRemovePage() {
     email: session.user.email,
   });
 
-  const countryCode = getCountryCode(headers());
+  const countryCode = getCountryCode(await headers());
   const profileId = await getOnerepProfileId(session.user.subscriber.id);
   const scanData = await getScanResultsWithBroker(
     profileId,