[Issue #134] Renable static rendering (#85)

navapbc · Jul 5, 2024 · 78dfc83 · 78dfc83
1 parent 46bbc1c
commit 78dfc83
Show file tree

Hide file tree

Showing 18 changed files with 76 additions and 403 deletions.
diff --git a/frontend/src/app/[locale]/layout.tsx b/frontend/src/app/[locale]/layout.tsx
@@ -0,0 +1,54 @@
+import { NextIntlClientProvider } from "next-intl";
+import { getMessages, unstable_setRequestLocale } from "next-intl/server";
+
+import { GoogleAnalytics } from "@next/third-parties/google";
+import { PUBLIC_ENV } from "src/constants/environments";
+
+import Layout from "src/components/Layout";
+
+/**
+ * Root layout component, wraps all pages.
+ * @see https://nextjs.org/docs/app/api-reference/file-conventions/layout
+ */
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  icons: [`${process.env.NEXT_PUBLIC_BASE_PATH ?? ""}/img/favicon.ico`],
+};
+
+interface Props {
+  children: React.ReactNode;
+  params: {
+    locale: string;
+  };
+}
+
+const locales = ["en", "es"];
+
+export function generateStaticParams() {
+  return locales.map((locale) => ({ locale }));
+}
+
+export default async function LocaleLayout({ children, params }: Props) {
+  const { locale } = params;
+
+  // Enable static rendering
+  unstable_setRequestLocale(locale);
+
+  // Providing all messages to the client
+  // side is the easiest way to get started
+  const messages = await getMessages();
+
+  return (
+    <html lang={locale}>
+      <head>
+        <GoogleAnalytics gaId={PUBLIC_ENV.GOOGLE_ANALYTICS_ID} />
+      </head>
+      <body>
+        <NextIntlClientProvider messages={messages}>
+          <Layout locale={locale}>{children}</Layout>
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/frontend/src/app/[locale]/newsletter/confirmation/page.tsx b/frontend/src/app/[locale]/newsletter/confirmation/page.tsx
@@ -8,7 +8,7 @@ import PageSEO from "src/components/PageSEO";
 import BetaAlert from "src/components/BetaAlert";
 import { useTranslations } from "next-intl";
 import { Metadata } from "next";
-import { getTranslations } from "next-intl/server";
+import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
 
 export async function generateMetadata() {
   const t = await getTranslations({ locale: "en" });
@@ -21,6 +21,7 @@ export async function generateMetadata() {
 }
 
 export default function NewsletterConfirmation() {
+  unstable_setRequestLocale("en");
   const t = useTranslations("Newsletter_confirmation");
 
   return (

diff --git a/frontend/src/app/[locale]/newsletter/page.tsx b/frontend/src/app/[locale]/newsletter/page.tsx
@@ -7,7 +7,7 @@ import PageSEO from "src/components/PageSEO";
 import BetaAlert from "src/components/BetaAlert";
 import NewsletterForm from "src/app/[locale]/newsletter/NewsletterForm";
 import { Metadata } from "next";
-import { getTranslations } from "next-intl/server";
+import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
 import {
   useTranslations,
   useMessages,
@@ -25,6 +25,7 @@ export async function generateMetadata() {
 }
 
 export default function Newsletter() {
+  unstable_setRequestLocale("en");
   const t = useTranslations("Newsletter");
   const messages = useMessages();
 

diff --git a/frontend/src/app/[locale]/newsletter/unsubscribe/page.tsx b/frontend/src/app/[locale]/newsletter/unsubscribe/page.tsx
@@ -8,7 +8,7 @@ import PageSEO from "src/components/PageSEO";
 import BetaAlert from "src/components/BetaAlert";
 import { useTranslations } from "next-intl";
 import { Metadata } from "next";
-import { getTranslations } from "next-intl/server";
+import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
 
 export async function generateMetadata() {
   const t = await getTranslations({ locale: "en" });
@@ -21,6 +21,7 @@ export async function generateMetadata() {
 }
 
 export default function NewsletterUnsubscribe() {
+  unstable_setRequestLocale("en");
   const t = useTranslations("Newsletter_unsubscribe");
 
   return (

diff --git a/frontend/src/app/[locale]/page.tsx b/frontend/src/app/[locale]/page.tsx
@@ -5,7 +5,7 @@ import IndexGoalContent from "src/components/content/IndexGoalContent";
 import ProcessAndResearchContent from "src/components/content/ProcessAndResearchContent";
 import { Metadata } from "next";
 import { useTranslations } from "next-intl";
-import { getTranslations } from "next-intl/server";
+import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
 
 export async function generateMetadata() {
   const t = await getTranslations({ locale: "en" });
@@ -17,6 +17,8 @@ export async function generateMetadata() {
 }
 
 export default function Home() {
+  unstable_setRequestLocale("en");
+
   const t = useTranslations("Index");
 
   return (

diff --git a/frontend/src/app/[locale]/process/page.tsx b/frontend/src/app/[locale]/process/page.tsx
@@ -9,7 +9,7 @@ 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 { useTranslations } from "next-intl";
-import { getTranslations } from "next-intl/server";
+import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
 
 export async function generateMetadata() {
   const t = await getTranslations({ locale: "en" });
@@ -21,6 +21,7 @@ export async function generateMetadata() {
 }
 
 export default function Process() {
+  unstable_setRequestLocale("en");
   const t = useTranslations("Process");
 
   return (

diff --git a/frontend/src/app/[locale]/research/page.tsx b/frontend/src/app/[locale]/research/page.tsx
@@ -10,7 +10,7 @@ import ResearchMethodology from "src/app/[locale]/research/ResearchMethodology";
 import ResearchThemes from "src/app/[locale]/research/ResearchThemes";
 import { Metadata } from "next";
 import { useTranslations } from "next-intl";
-import { getTranslations } from "next-intl/server";
+import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
 
 export async function generateMetadata() {
   const t = await getTranslations({ locale: "en" });
@@ -22,6 +22,8 @@ export async function generateMetadata() {
 }
 
 export default function Research() {
+  unstable_setRequestLocale("en");
+
   const t = useTranslations("Research");
 
   return (

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -1,44 +1,10 @@
 import "src/styles/styles.scss";
-import { GoogleAnalytics } from "@next/third-parties/google";
-import { PUBLIC_ENV } from "src/constants/environments";
+import { ReactNode } from "react";
 
-import Layout from "src/components/Layout";
-import { unstable_setRequestLocale } from "next-intl/server";
-/**
- * Root layout component, wraps all pages.
- * @see https://nextjs.org/docs/app/api-reference/file-conventions/layout
- */
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  icons: [`${process.env.NEXT_PUBLIC_BASE_PATH ?? ""}/img/favicon.ico`],
+type Props = {
+  children: ReactNode;
 };
 
-interface LayoutProps {
-  children: React.ReactNode;
-  params: {
-    locale: string;
-  };
-}
-
-export default function RootLayout({ children, params }: LayoutProps) {
-  // Hardcoded until the [locale] routing is enabled.
-  const locale = params.locale ? params.locale : "en";
-  // TODO: Remove when https://github.com/amannn/next-intl/issues/663 lands.
-  unstable_setRequestLocale(locale);
-
-  return (
-    <html lang={locale}>
-      <head>
-        <GoogleAnalytics gaId={PUBLIC_ENV.GOOGLE_ANALYTICS_ID} />
-      </head>
-      <body>
-        {/* Separate layout component for the inner-body UI elements since Storybook
-            and tests trip over the fact that this file renders an <html> tag */}
-
-        {/* TODO: Add locale="english" prop when ready for i18n */}
-        <Layout locale={locale}>{children}</Layout>
-      </body>
-    </html>
-  );
+export default function RootLayout({ children }: Props) {
+  return children;
 }
diff --git a/frontend/src/app/template.tsx b/frontend/src/app/template.tsx
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
@@ -6,6 +6,7 @@ import {
   useMessages,
   NextIntlClientProvider,
 } from "next-intl";
+import { unstable_setRequestLocale } from "next-intl/server";
 import pick from "lodash/pick";
 
 type Props = {
@@ -14,6 +15,8 @@ type Props = {
 };
 
 export default function Layout({ children, locale }: Props) {
+  unstable_setRequestLocale(locale);
+
   const t = useTranslations();
   const messages = useMessages();
 

diff --git a/frontend/tests/components/Layout.test.tsx b/frontend/tests/components/Layout.test.tsx
diff --git a/frontend/tests/pages/index.test.tsx b/frontend/tests/pages/index.test.tsx
diff --git a/frontend/tests/pages/newsletter/confirmation.test.tsx b/frontend/tests/pages/newsletter/confirmation.test.tsx