rebase

app/src/i18n/messages/en-US/index.ts

@@ -19,6 +19,9 @@ export const messages = {
     intro:
       "This is a template for a React web application using the <LinkToNextJs>Next.js framework</LinkToNextJs>.",
     body: "This is template includes:<ul><li>Framework for server-side rendered, static, or hybrid React applications</li><li>TypeScript and React testing tools</li><li>U.S. Web Design System for themeable styling and a set of common components</li><li>Type checking, linting, and code formatting tools</li><li>Storybook for a frontend workshop environment</li></ul>",
+    featureflagging: "The template includes AWS Evidently for feature flagging. Toggle flag to see the content below change:",
+    flagoff: "Flag is disabled",
+    flagon: "Flag is enabled",
     formatting:
       "The template includes an internationalization library with basic formatters built-in. Such as numbers: { amount, number, currency }, and dates: { isoDate, date, long}.",
   },

app/src/pages/index.tsx

@@ -1,21 +1,16 @@
-import type {
-  GetServerSideProps,
-  InferGetServerSidePropsType,
-  NextPage,
-} from "next";
-import { FeatureFlagManager } from "src/services/FeatureFlagManager";
+import type { GetServerSideProps, InferGetServerSidePropsType, NextPage } from "next";
+import { getLocaleMessages } from "src/i18n";
 
 import { useTranslations } from "next-intl";
 import Head from "next/head";
+import { FeatureFlagManager } from "src/services/FeatureFlagManager";
 
 interface PageProps {
   isFooEnabled: boolean;
 }
 
-const Home: NextPage<InferGetServerSidePropsType<typeof getServerSideProps>> = (
-  props: PageProps
-) => {
-  const { t } = useTranslation("home");
+const Home: NextPage<InferGetServerSidePropsType<typeof getServerSideProps>> = (props: PageProps) => {
+  const t = useTranslations("home");
 
   return (
     <>
@@ -34,39 +29,38 @@ const Home: NextPage<InferGetServerSidePropsType<typeof getServerSideProps>> = (
         })}
       </p>
       <div className="measure-6">
-        <Trans
-          t={t}
-          i18nKey="body"
-          components={{
-            ul: <ul className="usa-list" />,
-            li: <li />,
-          }}
-        />
+        {t.rich("body", {
+          ul: (content) => <ul className="usa-list">{content}</ul>,
+          li: (content) => <li>{content}</li>,
+        })}
+
         <p>
           {/* Demonstration of formatters */}
           {t("formatting", {
             amount: 1234,
             isoDate: new Date("2023-11-29T23:30:00.000Z"),
           })}
         </p>
+
         {/* Demonstration of feature flagging */}
-        <p>{t("featureflagging")}</p>
-        {props.isFooEnabled && <p>^..^</p>}
+          <p>{t("featureflagging")}</p>
+        {props.isFooEnabled ? (<p>^..^{t("flagon")}</p>) : <p>{t("flagoff")}</p>}
       </div>
     </>
   );
 };
 
 // Change this to getStaticProps if you're not using server-side rendering
-export const getServerSideProps: GetServerSideProps<PageProps> = async ({
-  locale,
-}) => {
-  const translations = await serverSideTranslations(locale ?? "en-US");
-
+export const getServerSideProps: GetServerSideProps<PageProps> = async ({ locale }) => {
   const featureFlags = new FeatureFlagManager("anonymous");
   const isFooEnabled = await featureFlags.isFeatureEnabled("foo");
 
-  return { props: { ...translations, isFooEnabled } };
+  return Promise.resolve({
+    props: {
+      messages: getLocaleMessages(locale),
+      isFooEnabled,
+    },
+  });
 };
 
-export default Home;
+export default Home;