[Issue #3078] clean up translation related code (#3089)

* replaces use of "unstable_setRequestLocale" with "setRequestLocale" and passes in dynamic locales
* includes a couple of quality of life improvements related to translation code
* translation should now work if we provide Spanish content

frontend/next.config.js

@@ -1,6 +1,6 @@
 // @ts-check
 
-const withNextIntl = require("next-intl/plugin")("./src/i18n/server.ts");
+const withNextIntl = require("next-intl/plugin")();
 const sassOptions = require("./scripts/sassOptions");
 const nrExternals = require("@newrelic/next/load-externals");
 

frontend/src/app/[locale]/[...not-found]/page.tsx

@@ -1,10 +1,13 @@
 import { Metadata } from "next";
+import { LocalizedPageProps } from "src/types/intl";
 
 import { getTranslations } from "next-intl/server";
 import { notFound } from "next/navigation";
 
-export async function generateMetadata() {
-  const t = await getTranslations({ locale: "en" });
+export async function generateMetadata({
+  params: { locale },
+}: LocalizedPageProps) {
+  const t = await getTranslations({ locale });
   const meta: Metadata = {
     title: t("ErrorPages.page_not_found.title"),
     description: t("Index.meta_description"),

frontend/src/app/[locale]/layout.tsx

@@ -12,7 +12,7 @@ import Script from "next/script";
 import "src/styles/styles.scss";
 
 import { NextIntlClientProvider } from "next-intl";
-import { getMessages, unstable_setRequestLocale } from "next-intl/server";
+import { getMessages, setRequestLocale } from "next-intl/server";
 
 import Layout from "src/components/Layout";
 
@@ -61,7 +61,7 @@ export default async function LocaleLayout({ children, params }: Props) {
   const { locale } = params;
 
   // Enable static rendering
-  unstable_setRequestLocale(locale);
+  setRequestLocale(locale);
 
   // Providing all messages to the client
   // side is the easiest way to get started

frontend/src/app/[locale]/not-found.tsx

@@ -1,23 +1,23 @@
 import { Metadata } from "next";
 
 import { useTranslations } from "next-intl";
-import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
+import { getTranslations } from "next-intl/server";
 import Link from "next/link";
 import { GridContainer } from "@trussworks/react-uswds";
 
 import BetaAlert from "src/components/BetaAlert";
 
 export async function generateMetadata() {
-  const t = await getTranslations({ locale: "en" });
+  const t = await getTranslations();
   const meta: Metadata = {
     title: t("ErrorPages.page_not_found.title"),
     description: t("Index.meta_description"),
   };
   return meta;
 }
 
+// note that NotFound pages do not take props so cannot be translated
 export default function NotFound() {
-  unstable_setRequestLocale("en");
   const t = useTranslations("ErrorPages.page_not_found");
 
   return (

frontend/src/app/[locale]/opportunity/[id]/page.tsx

@@ -29,12 +29,17 @@ type OpportunityListingProps = {
 export const revalidate = 600; // invalidate ten minutes
 export const dynamic = "force-dynamic";
 
-export async function generateMetadata({ params }: { params: { id: string } }) {
-  const t = await getTranslations({ locale: "en" });
+export async function generateMetadata({
+  params,
+}: {
+  params: { id: string; locale: string };
+}) {
+  const { id, locale } = params;
+  const t = await getTranslations({ locale });
   let title = `${t("OpportunityListing.page_title")}`;
   try {
     const { data: opportunityData } = await fetchOpportunity({
-      subPath: params.id,
+      subPath: id,
     });
     title = `${t("OpportunityListing.page_title")} - ${opportunityData.opportunity_title}`;
   } catch (error) {

frontend/src/app/[locale]/page.tsx

@@ -1,23 +1,26 @@
 import { Metadata } from "next";
+import { LocalizedPageProps } from "src/types/intl";
 
-import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
+import { getTranslations, setRequestLocale } from "next-intl/server";
 
 import BetaAlert from "src/components/BetaAlert";
 import IndexGoalContent from "src/components/content/IndexGoalContent";
 import ProcessAndResearchContent from "src/components/content/ProcessAndResearchContent";
 import Hero from "src/components/Hero";
 
-export async function generateMetadata() {
-  const t = await getTranslations({ locale: "en" });
+export async function generateMetadata({
+  params: { locale },
+}: LocalizedPageProps) {
+  const t = await getTranslations({ locale });
   const meta: Metadata = {
     title: t("Index.page_title"),
     description: t("Index.meta_description"),
   };
   return meta;
 }
 
-export default function Home() {
-  unstable_setRequestLocale("en");
+export default function Home({ params: { locale } }: LocalizedPageProps) {
+  setRequestLocale(locale);
   return (
     <>
       <Hero />

frontend/src/app/[locale]/process/page.tsx

@@ -3,23 +3,26 @@ import ProcessIntro from "src/app/[locale]/process/ProcessIntro";
 import ProcessInvolved from "src/app/[locale]/process/ProcessInvolved";
 import ProcessMilestones from "src/app/[locale]/process/ProcessMilestones";
 import { PROCESS_CRUMBS } from "src/constants/breadcrumbs";
+import { LocalizedPageProps } from "src/types/intl";
 
-import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
+import { getTranslations, setRequestLocale } from "next-intl/server";
 
 import BetaAlert from "src/components/BetaAlert";
 import Breadcrumbs from "src/components/Breadcrumbs";
 
-export async function generateMetadata() {
-  const t = await getTranslations({ locale: "en" });
+export async function generateMetadata({
+  params: { locale },
+}: LocalizedPageProps) {
+  const t = await getTranslations({ locale });
   const meta: Metadata = {
     title: t("Process.page_title"),
     description: t("Process.meta_description"),
   };
   return meta;
 }
 
-export default function Process() {
-  unstable_setRequestLocale("en");
+export default function Process({ params: { locale } }: LocalizedPageProps) {
+  setRequestLocale(locale);
   return (
     <>
       <BetaAlert />

frontend/src/app/[locale]/research/page.tsx

@@ -5,23 +5,26 @@ import ResearchIntro from "src/app/[locale]/research/ResearchIntro";
 import ResearchMethodology from "src/app/[locale]/research/ResearchMethodology";
 import ResearchThemes from "src/app/[locale]/research/ResearchThemes";
 import { RESEARCH_CRUMBS } from "src/constants/breadcrumbs";
+import { LocalizedPageProps } from "src/types/intl";
 
-import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
+import { getTranslations, setRequestLocale } from "next-intl/server";
 
 import BetaAlert from "src/components/BetaAlert";
 import Breadcrumbs from "src/components/Breadcrumbs";
 
-export async function generateMetadata() {
-  const t = await getTranslations({ locale: "en" });
+export async function generateMetadata({
+  params: { locale },
+}: LocalizedPageProps) {
+  const t = await getTranslations({ locale });
   const meta: Metadata = {
     title: t("Research.page_title"),
     description: t("Research.meta_description"),
   };
   return meta;
 }
 
-export default function Research() {
-  unstable_setRequestLocale("en");
+export default function Research({ params: { locale } }: LocalizedPageProps) {
+  setRequestLocale(locale);
   return (
     <>
       <BetaAlert />

frontend/src/app/[locale]/search/layout.tsx

@@ -1,17 +1,21 @@
 import { SEARCH_CRUMBS } from "src/constants/breadcrumbs";
 
-import { unstable_setRequestLocale } from "next-intl/server";
+import { setRequestLocale } from "next-intl/server";
 
 import BetaAlert from "src/components/BetaAlert";
 import Breadcrumbs from "src/components/Breadcrumbs";
 import SearchCallToAction from "src/components/search/SearchCallToAction";
 
 export default function SearchLayout({
   children,
+  params: { locale },
 }: {
   children: React.ReactNode;
+  params: {
+    locale: string;
+  };
 }) {
-  unstable_setRequestLocale("en");
+  setRequestLocale(locale);
   return (
     <>
       <BetaAlert />

frontend/src/app/[locale]/search/page.tsx

@@ -1,12 +1,13 @@
 import { Metadata } from "next";
 import QueryProvider from "src/app/[locale]/search/QueryProvider";
 import withFeatureFlag from "src/hoc/search/withFeatureFlag";
+import { LocalizedPageProps } from "src/types/intl";
 import { SearchParamsTypes } from "src/types/search/searchRequestTypes";
 import { Breakpoints } from "src/types/uiTypes";
 import { convertSearchParamsToProperTypes } from "src/utils/search/convertSearchParamsToProperTypes";
 
 import { useTranslations } from "next-intl";
-import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
+import { getTranslations, setRequestLocale } from "next-intl/server";
 import { redirect } from "next/navigation";
 
 import ContentDisplayToggle from "src/components/ContentDisplayToggle";
@@ -15,19 +16,23 @@ import SearchBar from "src/components/search/SearchBar";
 import SearchFilters from "src/components/search/SearchFilters";
 import SearchResults from "src/components/search/SearchResults";
 
-export async function generateMetadata() {
-  const t = await getTranslations({ locale: "en" });
+export async function generateMetadata({
+  params: { locale },
+}: LocalizedPageProps) {
+  const t = await getTranslations({ locale });
   const meta: Metadata = {
     title: t("Search.title"),
     description: t("Index.meta_description"),
   };
   return meta;
 }
+type SearchPageProps = {
+  searchParams: SearchParamsTypes;
+  params: { locale: string };
+};
 
-type SearchPageProps = { searchParams: SearchParamsTypes };
-
-function Search({ searchParams }: SearchPageProps) {
-  unstable_setRequestLocale("en");
+function Search({ searchParams, params: { locale } }: SearchPageProps) {
+  setRequestLocale(locale);
   const t = useTranslations("Search");
 
   const convertedSearchParams = convertSearchParamsToProperTypes(searchParams);

frontend/src/app/[locale]/subscribe/confirmation/page.tsx

@@ -1,16 +1,19 @@
 import { Metadata } from "next";
 import { SUBSCRIBE_CONFIRMATION_CRUMBS } from "src/constants/breadcrumbs";
+import { LocalizedPageProps } from "src/types/intl";
 
 import { useTranslations } from "next-intl";
-import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
+import { getTranslations, setRequestLocale } from "next-intl/server";
 import Link from "next/link";
 import { Grid, GridContainer } from "@trussworks/react-uswds";
 
 import BetaAlert from "src/components/BetaAlert";
 import Breadcrumbs from "src/components/Breadcrumbs";
 
-export async function generateMetadata() {
-  const t = await getTranslations({ locale: "en" });
+export async function generateMetadata({
+  params: { locale },
+}: LocalizedPageProps) {
+  const t = await getTranslations({ locale });
   const meta: Metadata = {
     title: t("Subscribe.page_title"),
     description: t("Index.meta_description"),
@@ -19,8 +22,10 @@ export async function generateMetadata() {
   return meta;
 }
 
-export default function SubscriptionConfirmation() {
-  unstable_setRequestLocale("en");
+export default function SubscriptionConfirmation({
+  params: { locale },
+}: LocalizedPageProps) {
+  setRequestLocale(locale);
   const t = useTranslations("Subscription_confirmation");
 
   return (

frontend/src/app/[locale]/subscribe/page.tsx

@@ -1,21 +1,19 @@
-import pick from "lodash/pick";
 import { Metadata } from "next";
 import { SUBSCRIBE_CRUMBS } from "src/constants/breadcrumbs";
+import { LocalizedPageProps } from "src/types/intl";
 
-import {
-  NextIntlClientProvider,
-  useMessages,
-  useTranslations,
-} from "next-intl";
-import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
+import { useTranslations } from "next-intl";
+import { getTranslations, setRequestLocale } from "next-intl/server";
 import { Grid, GridContainer } from "@trussworks/react-uswds";
 
 import BetaAlert from "src/components/BetaAlert";
 import Breadcrumbs from "src/components/Breadcrumbs";
 import SubscriptionForm from "src/components/subscribe/SubscriptionForm";
 
-export async function generateMetadata() {
-  const t = await getTranslations({ locale: "en" });
+export async function generateMetadata({
+  params: { locale },
+}: LocalizedPageProps) {
+  const t = await getTranslations({ locale });
   const meta: Metadata = {
     title: t("Subscribe.page_title"),
     description: t("Index.meta_description"),
@@ -24,10 +22,9 @@ export async function generateMetadata() {
   return meta;
 }
 
-export default function Subscribe() {
-  unstable_setRequestLocale("en");
+export default function Subscribe({ params: { locale } }: LocalizedPageProps) {
+  setRequestLocale(locale);
   const t = useTranslations("Subscribe");
-  const messages = useMessages();
 
   return (
     <>
@@ -54,12 +51,7 @@ export default function Subscribe() {
             })}
           </Grid>
           <Grid tabletLg={{ col: 6 }}>
-            <NextIntlClientProvider
-              locale="en"
-              messages={pick(messages, "Subscribe")}
-            >
-              <SubscriptionForm />
-            </NextIntlClientProvider>
+            <SubscriptionForm />
           </Grid>
         </Grid>
       </GridContainer>

frontend/src/app/[locale]/subscribe/unsubscribe/page.tsx

@@ -1,16 +1,19 @@
 import { Metadata } from "next";
 import { UNSUBSCRIBE_CRUMBS } from "src/constants/breadcrumbs";
+import { LocalizedPageProps } from "src/types/intl";
 
 import { useTranslations } from "next-intl";
-import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
+import { getTranslations, setRequestLocale } from "next-intl/server";
 import Link from "next/link";
 import { Grid, GridContainer } from "@trussworks/react-uswds";
 
 import BetaAlert from "src/components/BetaAlert";
 import Breadcrumbs from "src/components/Breadcrumbs";
 
-export async function generateMetadata() {
-  const t = await getTranslations({ locale: "en" });
+export async function generateMetadata({
+  params: { locale },
+}: LocalizedPageProps) {
+  const t = await getTranslations({ locale });
   const meta: Metadata = {
     title: t("Subscribe.page_title"),
     description: t("Index.meta_description"),
@@ -19,8 +22,10 @@ export async function generateMetadata() {
   return meta;
 }
 
-export default function Unsubscribe() {
-  unstable_setRequestLocale("en");
+export default function Unsubscribe({
+  params: { locale },
+}: LocalizedPageProps) {
+  setRequestLocale(locale);
   const t = useTranslations("Unsubscription_confirmation");
 
   return (