From 8d7ce6c60ceffc8de5b5e5e72a816fb0aaadda6b Mon Sep 17 00:00:00 2001
From: Alexandra Goff <agoff@lsst.org>
Date: Tue, 1 Oct 2024 13:46:53 -0700
Subject: [PATCH] feat: app directory (#541)

---
 .eslintrc.js                               |   8 ++
 app/[locale]/error.tsx                     |  12 ++
 app/[locale]/layout.tsx                    |  80 ++++++++++++
 app/[locale]/page.tsx                      |  72 +++++++++++
 app/[locale]/scripts.tsx                   |  81 ++++++++++++
 app/layout.tsx                             |   9 ++
 app/not-found.tsx                          |  45 +++++++
 components/global/Body/index.js            |   2 +
 components/global/Footer/index.js          |   1 +
 components/global/Header/index.js          |  25 ++--
 components/organisms/Error/index.tsx       |  21 ++++
 components/organisms/PageWrapper/index.tsx |  48 ++++++++
 components/templates/HomePage/index.js     |  10 +-
 contexts/Authentication.js                 |   7 +-
 contexts/GlobalData.js                     |   1 +
 contexts/{i18next.jsx => i18next.tsx}      |  11 +-
 hooks/useAuthentication.js                 |  31 +----
 lib/api/entries.js                         |   2 +-
 lib/api/globals/index.ts                   |  85 +++++++++++++
 lib/api/metadata/index.ts                  |  45 +++++++
 lib/api/noirlabReleases.js                 |  11 +-
 lib/helpers/site.ts                        |   7 ++
 lib/i18n/client.js                         |   3 +-
 lib/i18n/{index.js => index.ts}            |  12 +-
 lib/i18n/server.ts                         |  11 ++
 lib/styles/font.ts                         |  12 ++
 lib/styles/registry.tsx                    |  29 +++++
 lib/utils.js                               |  14 ---
 pages/[locale]/[...uriSegments]/index.js   |   2 +-
 pages/[locale]/index.js                    | 137 ---------------------
 pages/_app.js                              |   9 +-
 pages/api/preview.js                       |   6 +-
 pages/api/revalidate.js                    |  16 ++-
 theme/styles/base/_base.scss               |  21 +---
 theme/styles/globalStyles.js               |   1 +
 tsconfig.json                              | 115 ++++++-----------
 types/next.d.ts                            |  14 +++
 37 files changed, 683 insertions(+), 333 deletions(-)
 create mode 100644 app/[locale]/error.tsx
 create mode 100644 app/[locale]/layout.tsx
 create mode 100644 app/[locale]/page.tsx
 create mode 100644 app/[locale]/scripts.tsx
 create mode 100644 app/layout.tsx
 create mode 100644 app/not-found.tsx
 create mode 100644 components/organisms/Error/index.tsx
 create mode 100644 components/organisms/PageWrapper/index.tsx
 rename contexts/{i18next.jsx => i18next.tsx} (65%)
 create mode 100644 lib/api/globals/index.ts
 create mode 100644 lib/api/metadata/index.ts
 create mode 100644 lib/helpers/site.ts
 rename lib/i18n/{index.js => index.ts} (83%)
 create mode 100644 lib/i18n/server.ts
 create mode 100644 lib/styles/font.ts
 create mode 100644 lib/styles/registry.tsx
 delete mode 100644 pages/[locale]/index.js
 create mode 100644 types/next.d.ts

diff --git a/.eslintrc.js b/.eslintrc.js
index 94955577..2907fa79 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -104,4 +104,12 @@ module.exports = {
     "plugin:storybook/recommended",
     "plugin:cypress/recommended",
   ],
+  overrides: [
+    {
+      files: ["*.ts", "*.tsx"],
+      rules: {
+        "no-undef": "off",
+      },
+    },
+  ],
 };
diff --git a/app/[locale]/error.tsx b/app/[locale]/error.tsx
new file mode 100644
index 00000000..3750bf93
--- /dev/null
+++ b/app/[locale]/error.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import { FunctionComponent } from "react";
+import { useTranslation } from "react-i18next";
+import Error from "@/components/organisms/Error";
+
+const ErrorPage: FunctionComponent<ErrorProps> = ({ error }) => {
+  const { t } = useTranslation();
+  return <Error title={t("error-title")} message={error.message} />;
+};
+
+export default ErrorPage;
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
new file mode 100644
index 00000000..ea09fb79
--- /dev/null
+++ b/app/[locale]/layout.tsx
@@ -0,0 +1,80 @@
+import { FunctionComponent, PropsWithChildren, Suspense } from "react";
+import { Metadata } from "next";
+import { GoogleOAuthProvider } from "@react-oauth/google";
+import GlobalStyles from "@/styles/globalStyles";
+import { getGlobalData } from "@/lib/api/globals";
+import { languages } from "@/lib/i18n/settings";
+import SourceSansPro from "@/lib/styles/font";
+import StyledComponentsRegistry from "@/lib/styles/registry";
+import I18NextClientProvider from "@/contexts/i18next";
+import { AuthenticationContextProvider } from "@/contexts/Authentication";
+import PageWrapper from "@/components/organisms/PageWrapper";
+import RootScripts from "./scripts";
+
+const GOOGLE_APP_ID = process.env.NEXT_PUBLIC_GOOGLE_APP_ID || "";
+
+export async function generateMetadata({
+  params: { locale },
+}: LocaleProps): Promise<Metadata> {
+  const { siteInfo: metadata } = await getGlobalData(locale);
+  const { siteTitle, siteDescription, siteImage, language } = metadata;
+  const { url, width, height, altText: alt } = siteImage[0];
+
+  return {
+    title: {
+      default: siteTitle,
+      template: `%s | ${siteTitle}`,
+    },
+    description: siteDescription,
+    manifest: "/site.webmanifest",
+    openGraph: {
+      locale: language,
+      images: [{ url, width, height, alt }],
+    },
+    icons: {
+      icon: [
+        { url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
+        { url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
+      ],
+      apple: [
+        { url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" },
+      ],
+    },
+  };
+}
+
+export const generateStaticParams = () => {
+  return languages.map((locale) => {
+    return { locale };
+  });
+};
+
+export const dynamicParams = false;
+
+const LocaleLayout: FunctionComponent<PropsWithChildren<LocaleProps>> = async ({
+  params: { locale },
+  children,
+}) => {
+  return (
+    <html lang={locale}>
+      <head></head>
+      <body className={SourceSansPro.variable}>
+        <I18NextClientProvider {...{ locale }}>
+          <Suspense>
+            <AuthenticationContextProvider>
+              <StyledComponentsRegistry>
+                <GoogleOAuthProvider clientId={GOOGLE_APP_ID}>
+                  <GlobalStyles />
+                  <PageWrapper {...{ locale }}>{children}</PageWrapper>
+                </GoogleOAuthProvider>
+              </StyledComponentsRegistry>
+            </AuthenticationContextProvider>
+          </Suspense>
+        </I18NextClientProvider>
+        <RootScripts {...{ locale }} />
+      </body>
+    </html>
+  );
+};
+
+export default LocaleLayout;
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
new file mode 100644
index 00000000..3a328328
--- /dev/null
+++ b/app/[locale]/page.tsx
@@ -0,0 +1,72 @@
+import { FunctionComponent } from "react";
+import { notFound } from "next/navigation";
+import { draftMode } from "next/headers";
+import { getEntrySectionTypeByUri, getEntryDataByUri } from "@/api/entry";
+import { setEdcLog } from "@/lib/edc-log";
+import { getSiteFromLocale } from "@/lib/helpers/site";
+import { purgeNextjsStaticFiles } from "@/lib/purgeStaticFiles";
+import HomePageTemplate from "@/templates/HomePage";
+import { Metadata } from "next";
+import { getEntryMetadataByUri } from "@/lib/api/metadata";
+
+const CRAFT_HOMEPAGE_URI = "__home__";
+
+export async function generateMetadata({
+  params: { locale },
+  searchParams = {},
+}: LocaleProps): Promise<Metadata> {
+  const uri = CRAFT_HOMEPAGE_URI;
+  let previewToken: string | undefined;
+
+  if (draftMode().isEnabled) {
+    previewToken = Array.isArray(searchParams.preview)
+      ? searchParams.preview[0]
+      : searchParams?.preview;
+  }
+
+  const {
+    entry: { title, description },
+  } = await getEntryMetadataByUri(uri, locale, previewToken);
+
+  return { title, description };
+}
+
+const RootPage: FunctionComponent<LocaleProps> = async ({
+  params: { locale },
+  searchParams = {},
+}) => {
+  const runId = Date.now().toString();
+  const site = getSiteFromLocale(locale);
+  const uri = CRAFT_HOMEPAGE_URI;
+  let previewToken: string | undefined;
+
+  if (draftMode().isEnabled) {
+    previewToken = Array.isArray(searchParams.preview)
+      ? searchParams.preview[0]
+      : searchParams.preview;
+  }
+
+  const entrySectionType = await getEntrySectionTypeByUri(
+    uri,
+    site,
+    previewToken
+  );
+
+  const { sectionHandle: section, typeHandle: type } = entrySectionType;
+  const data = await getEntryDataByUri(uri, section, type, site, previewToken);
+
+  const currentId = data?.id || data?.entry?.id;
+
+  // Handle 404 if there is no data
+  if (!currentId) {
+    setEdcLog(runId, "404 encountered building for " + uri, "BUILD_ERROR_404");
+    await purgeNextjsStaticFiles(locale);
+    notFound();
+  }
+
+  setEdcLog(runId, "Done building for " + uri, "BUILD_COMPLETE");
+
+  return <HomePageTemplate {...{ section, data }} />;
+};
+
+export default RootPage;
diff --git a/app/[locale]/scripts.tsx b/app/[locale]/scripts.tsx
new file mode 100644
index 00000000..e3533118
--- /dev/null
+++ b/app/[locale]/scripts.tsx
@@ -0,0 +1,81 @@
+import { FunctionComponent } from "react";
+import Script from "next/script";
+
+const PLAUSIBLE_DOMAIN = process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN;
+const SURVEY_SPARROW = process.env.NEXT_PUBLIC_SURVEY_SPARROW;
+
+const RootScripts: FunctionComponent<{ locale: string }> = ({ locale }) => {
+  return (
+    <>
+      {PLAUSIBLE_DOMAIN && (
+        <Script
+          id="plausible-script"
+          data-domain={PLAUSIBLE_DOMAIN}
+          src="https://plausible.io/js/plausible.js"
+        />
+      )}
+      {SURVEY_SPARROW && (
+        <>
+          <div id="ss_survey_widget" />
+          <Script
+            id="SS_SCRIPT"
+            dangerouslySetInnerHTML={{
+              __html: `
+          function sparrowLaunch(opts) {
+            // eslint-disable-next-line no-var, one-var
+            var e = "ss-widget",
+              t = "script",
+              a = document,
+              r = window,
+              l = localStorage;
+            // eslint-disable-next-line no-var, one-var
+            var s,
+              n,
+              c,
+              rm = a.getElementById("SS_SCRIPT");
+            r.SS_WIDGET_TOKEN = "tt-tTTCZh648ZKwCNkh91aodV";
+            r.SS_ACCOUNT = "rockmanetal.surveysparrow.com";
+            r.SS_SURVEY_NAME = "rubin-pop-up---chat-survey";
+            if (
+              !a.getElementById(e) &&
+              !l.getItem("removed-ss-widget-tt-tTTCZh648ZKwCNkh91aodV")
+            ) {
+              // eslint-disable-next-line no-var
+              var S = function () {
+                S.update(arguments);
+              };
+              S.args = [];
+              S.update = function (e) {
+                S.args.push(e);
+              };
+              r.SparrowLauncher = S;
+              s = a.getElementsByTagName(t);
+              c = s[s.length - 1];
+              n = a.createElement(t);
+              n.type = "text/javascript";
+              n.async = !0;
+              n.id = e;
+              n.src = [
+                "https://",
+                "rockmanetal.surveysparrow.com/widget/",
+                r.SS_WIDGET_TOKEN,
+                "?",
+                "customParams=",
+                JSON.stringify(opts),
+              ].join("");
+              c.parentNode.insertBefore(n, c);
+              r.SS_VARIABLES = opts;
+              rm.parentNode.removeChild(rm);
+            }
+          }
+          sparrowLaunch({sparrowLang: "${locale}"});
+        `,
+            }}
+          />
+        </>
+      )}
+    </>
+  );
+};
+
+export default RootScripts;
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 00000000..a1ece292
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,9 @@
+import "focus-visible";
+import "@/styles/styles.scss";
+import { FunctionComponent, PropsWithChildren } from "react";
+
+const RootLayout: FunctionComponent<PropsWithChildren> = ({ children }) => {
+  return <>{children}</>;
+};
+
+export default RootLayout;
diff --git a/app/not-found.tsx b/app/not-found.tsx
new file mode 100644
index 00000000..06c3bf07
--- /dev/null
+++ b/app/not-found.tsx
@@ -0,0 +1,45 @@
+import { FunctionComponent, Suspense } from "react";
+import SourceSansPro from "@/lib/styles/font";
+import StyledComponentsRegistry from "@/lib/styles/registry";
+import GlobalStyles from "@/styles/globalStyles";
+import I18NextClientProvider from "@/contexts/i18next";
+import { AuthenticationContextProvider } from "@/contexts/Authentication";
+import { GoogleOAuthProvider } from "@react-oauth/google";
+import PageWrapper from "@/components/organisms/PageWrapper";
+import { useTranslation } from "@/lib/i18n";
+import { getLocale } from "@/lib/i18n/server";
+import Error from "@/components/organisms/Error";
+
+const GOOGLE_APP_ID = process.env.NEXT_PUBLIC_GOOGLE_APP_ID || "";
+
+const NotFound: FunctionComponent = async () => {
+  const locale = getLocale();
+  const { t } = await useTranslation(locale, "translation");
+
+  return (
+    <html lang={locale}>
+      <head></head>
+      <body className={SourceSansPro.variable}>
+        <I18NextClientProvider {...{ locale }}>
+          <Suspense>
+            <AuthenticationContextProvider>
+              <StyledComponentsRegistry>
+                <GoogleOAuthProvider clientId={GOOGLE_APP_ID}>
+                  <GlobalStyles />
+                  <PageWrapper {...{ locale }}>
+                    <Error
+                      title={t("page-not-found-title")}
+                      message={t("page-not-found-text")}
+                    />
+                  </PageWrapper>
+                </GoogleOAuthProvider>
+              </StyledComponentsRegistry>
+            </AuthenticationContextProvider>
+          </Suspense>
+        </I18NextClientProvider>
+      </body>
+    </html>
+  );
+};
+
+export default NotFound;
diff --git a/components/global/Body/index.js b/components/global/Body/index.js
index 449eddc3..c98b0593 100644
--- a/components/global/Body/index.js
+++ b/components/global/Body/index.js
@@ -15,6 +15,7 @@ export default function Body({ children, description, openGraphImage, title }) {
         userProfilePage,
         footerContent,
         contactForm,
+        localeInfo: { locale },
       }) => {
         const {
           siteTitle,
@@ -34,6 +35,7 @@ export default function Body({ children, description, openGraphImage, title }) {
               <Header
                 navItems={headerNavItems}
                 userProfilePage={userProfilePage}
+                locale={locale}
               />
               <main id="page-content">{children}</main>
               <Footer
diff --git a/components/global/Footer/index.js b/components/global/Footer/index.js
index 0b02a742..13e65980 100644
--- a/components/global/Footer/index.js
+++ b/components/global/Footer/index.js
@@ -1,3 +1,4 @@
+"use client";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
 import Social from "./Social";
diff --git a/components/global/Header/index.js b/components/global/Header/index.js
index 71ea4352..2377b5ab 100644
--- a/components/global/Header/index.js
+++ b/components/global/Header/index.js
@@ -1,4 +1,5 @@
-import { useState } from "react";
+"use client";
+import { Suspense, useState } from "react";
 import PropTypes from "prop-types";
 import Link from "next/link";
 import useResizeObserver from "use-resize-observer";
@@ -6,7 +7,7 @@ import { useTranslation } from "react-i18next";
 import Logo from "@/components/svg/unique/site/Logo";
 import LogoFullSize from "@/components/svg/unique/site/LogoFullSize";
 import internalLinkShape from "@/shapes/link";
-import { useGlobalData, useNavHider } from "@/lib/utils";
+import { useNavHider } from "@/lib/utils";
 import {
   SignInModal,
   RegisterModal,
@@ -23,15 +24,14 @@ import LanguageSelect from "./LanguageSelect";
 import UserNavigation from "./UserNav";
 import SRAuthStatus from "../../auth/SRAuthStatus";
 
-export default function Header({ navItems, userProfilePage }) {
+export default function Header({ navItems, userProfilePage, locale }) {
   const [mobileNavActive, setMobileNavActive] = useState(false);
   const [desktopNavActive, setDesktopNavActive] = useState(false);
   const [mobileLogoActive, setMobileLogoActive] = useState(false);
   const [prevScrollPos, setPrevScrollPos] = useState(0);
   const [visible, setVisible] = useState(true);
   const { t } = useTranslation();
-  const { localeInfo } = useGlobalData();
-  const homeUrl = localeInfo.locale === "es" ? `/es` : `/`;
+  const homeUrl = locale === "es" ? `/es` : `/`;
 
   useNavHider(prevScrollPos, setPrevScrollPos, visible, setVisible);
 
@@ -110,12 +110,14 @@ export default function Header({ navItems, userProfilePage }) {
         mobileActive={mobileNavActive}
         mobileSetter={setMobileNavActive}
       />
-      <SignInModal />
-      <RegisterModal />
-      <SSOModal />
-      <ForgotPasswordModal />
-      <SetPasswordModal />
-      <ActivateModal />
+      <Suspense>
+        <SignInModal />
+        <RegisterModal />
+        <SSOModal />
+        <ForgotPasswordModal />
+        <SetPasswordModal />
+        <ActivateModal />
+      </Suspense>
     </header>
   );
 }
@@ -123,6 +125,7 @@ export default function Header({ navItems, userProfilePage }) {
 Header.displayName = "Global.Header";
 
 Header.propTypes = {
+  locale: PropTypes.string,
   navItems: PropTypes.arrayOf(internalLinkShape),
   userProfilePage: PropTypes.object,
 };
diff --git a/components/organisms/Error/index.tsx b/components/organisms/Error/index.tsx
new file mode 100644
index 00000000..59ae6e02
--- /dev/null
+++ b/components/organisms/Error/index.tsx
@@ -0,0 +1,21 @@
+import { FunctionComponent } from "react";
+import Container from "@rubin-epo/epo-react-lib/Container";
+
+const Error: FunctionComponent<{ title: string; message: string }> = ({
+  title,
+  message,
+}) => {
+  return (
+    <Container>
+      <h1>{title}</h1>
+      <div
+        className="c-content-rte"
+        dangerouslySetInnerHTML={{ __html: message }}
+      />
+    </Container>
+  );
+};
+
+Error.displayName = "Organism.Error";
+
+export default Error;
diff --git a/components/organisms/PageWrapper/index.tsx b/components/organisms/PageWrapper/index.tsx
new file mode 100644
index 00000000..353da138
--- /dev/null
+++ b/components/organisms/PageWrapper/index.tsx
@@ -0,0 +1,48 @@
+import { FunctionComponent, PropsWithChildren } from "react";
+import { getGlobalData } from "@/lib/api/globals";
+import { GlobalDataProvider } from "@/contexts/GlobalData";
+import Header from "@/components/global/Header";
+import Footer from "@/components/global/Footer";
+import Center from "@rubin-epo/epo-react-lib/Center";
+
+const PageWrapper: FunctionComponent<
+  PropsWithChildren<{ locale: string }>
+> = async ({ locale, children }) => {
+  const globalData = await getGlobalData(locale);
+  const {
+    headerNavItems,
+    userProfilePage,
+    footerContent,
+    contactForm,
+    siteInfo: { email, facebook, instagram, linkedIn, twitter, youTube },
+  } = globalData;
+
+  return (
+    <GlobalDataProvider data={globalData}>
+      <Center maxWidth="2000px">
+        <Header
+          navItems={headerNavItems}
+          userProfilePage={userProfilePage}
+          locale={locale}
+        />
+        <main id="page-content">{children}</main>
+        <Footer
+          socialInfo={{
+            email,
+            facebook,
+            instagram,
+            linkedIn,
+            twitter,
+            youTube,
+          }}
+          content={footerContent}
+          contactForm={contactForm}
+        />
+      </Center>
+    </GlobalDataProvider>
+  );
+};
+
+PageWrapper.displayName = "Organism.PageWrapper";
+
+export default PageWrapper;
diff --git a/components/templates/HomePage/index.js b/components/templates/HomePage/index.js
index 73da1a66..efc52429 100644
--- a/components/templates/HomePage/index.js
+++ b/components/templates/HomePage/index.js
@@ -1,6 +1,6 @@
+"use client";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
-import Body from "@/global/Body";
 import ContentBlockFactory from "@/factories/ContentBlockFactory";
 import Hero from "@/page/Hero";
 import { Buttonish, MixedLink } from "@rubin-epo/epo-react-lib";
@@ -24,10 +24,6 @@ export default function HomePage({
   },
 }) {
   const { t } = useTranslation();
-  const bodyProps = {
-    description,
-    title,
-  };
 
   // HERO AREA
   // If there is a newsEntry or customHero, display alternate hero area
@@ -84,7 +80,7 @@ export default function HomePage({
   }
 
   return (
-    <Body {...bodyProps}>
+    <>
       {isAlternate ? (
         <Styled.HeroWrapper>
           {altFlag && <Styled.Flag>{altFlag}</Styled.Flag>}
@@ -138,7 +134,7 @@ export default function HomePage({
           />
         );
       })}
-    </Body>
+    </>
   );
 }
 
diff --git a/contexts/Authentication.js b/contexts/Authentication.js
index beeeb483..53cc32a8 100644
--- a/contexts/Authentication.js
+++ b/contexts/Authentication.js
@@ -1,11 +1,14 @@
+"use client";
 import { createContext, useContext } from "react";
+import useAuthentication from "@/hooks/useAuthentication";
 
 const AuthenticationContext = createContext(null);
 
 // eslint-disable-next-line react/prop-types
-export function AuthenticationContextProvider({ data, children }) {
+export function AuthenticationContextProvider({ children }) {
+  const authData = useAuthentication();
   return (
-    <AuthenticationContext.Provider value={data}>
+    <AuthenticationContext.Provider value={authData}>
       {children}
     </AuthenticationContext.Provider>
   );
diff --git a/contexts/GlobalData.js b/contexts/GlobalData.js
index 0d5ea045..f43109f7 100644
--- a/contexts/GlobalData.js
+++ b/contexts/GlobalData.js
@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from "react";
 import PropTypes from "prop-types";
 import { internalLinkWithChildrenShape } from "@/shapes/link";
diff --git a/contexts/i18next.jsx b/contexts/i18next.tsx
similarity index 65%
rename from contexts/i18next.jsx
rename to contexts/i18next.tsx
index e375b1cc..d8ec5fc1 100644
--- a/contexts/i18next.jsx
+++ b/contexts/i18next.tsx
@@ -1,10 +1,12 @@
 "use client";
-import PropTypes from "prop-types";
 import useClientTranslation from "@/lib/i18n/client";
 import { fallbackLng } from "@/lib/i18n/settings";
+import { FunctionComponent, PropsWithChildren } from "react";
 import { I18nextProvider } from "react-i18next";
 
-const I18NextClientProvider = ({ locale = fallbackLng, children }) => {
+const I18NextClientProvider: FunctionComponent<
+  PropsWithChildren<{ locale: string }>
+> = ({ locale = fallbackLng, children }) => {
   const { i18n } = useClientTranslation(locale);
 
   return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
@@ -12,9 +14,4 @@ const I18NextClientProvider = ({ locale = fallbackLng, children }) => {
 
 I18NextClientProvider.displayName = "i18next.Provider";
 
-I18NextClientProvider.propTypes = {
-  locale: PropTypes.string,
-  children: PropTypes.node,
-};
-
 export default I18NextClientProvider;
diff --git a/hooks/useAuthentication.js b/hooks/useAuthentication.js
index 93dee026..bc56e341 100644
--- a/hooks/useAuthentication.js
+++ b/hooks/useAuthentication.js
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { useRouter, usePathname } from "next/navigation";
+import { usePathname } from "next/navigation";
 import jwtDecode from "jwt-decode";
 import {
   authenticate,
@@ -55,15 +55,8 @@ function hasPendingDeletion(userData) {
   return userData?.requestDeletion?.[0] === "requested";
 }
 
-function normalizeLanguage(language) {
-  if (language !== "en" && language !== "es") return null;
-  if (language === "en") return "en-US";
-  return language;
-}
-
 // TODO: store refresh token in cookie so token can be refreshed after browser session ends
-export default function useAuthentication(data) {
-  const { push } = useRouter();
+export default function useAuthentication() {
   const { queryParams } = useQueryParams();
   const pathName = usePathname();
 
@@ -160,20 +153,6 @@ export default function useAuthentication(data) {
     return data;
   }
 
-  function maybeRedirectToPreferredLanguage(preferredLanguage) {
-    const newlanguage = normalizeLanguage(preferredLanguage);
-
-    if (!newlanguage || data?.language === newlanguage) return;
-
-    const localized = data?.localized ?? [];
-    const newLocale = localized.find(
-      (locale) => locale.language === newlanguage
-    );
-    const uri = newLocale?.uri;
-
-    push(uri === CRAFT_HOMEPAGE_URI ? "/" : uri);
-  }
-
   function getUserFromJwt(jwt = getTokenFromStorage("jwt")) {
     if (!jwt) return;
 
@@ -235,10 +214,6 @@ export default function useAuthentication(data) {
 
     if (!data?.authenticate) return handleError(data);
 
-    maybeRedirectToPreferredLanguage(
-      data.authenticate?.user?.preferredLanguage
-    );
-
     return handleSuccess(data.authenticate);
   }
 
@@ -322,7 +297,6 @@ export default function useAuthentication(data) {
 
     if (!data?.[returnRole]) return handleError(data);
 
-    maybeRedirectToPreferredLanguage(data[returnRole]?.user?.preferredLanguage);
     return handleSuccess(data[returnRole]);
   }
 
@@ -372,7 +346,6 @@ export default function useAuthentication(data) {
 
     if (!data?.[returnRole]) return handleError(data);
 
-    maybeRedirectToPreferredLanguage(data[returnRole]?.user?.preferredLanguage);
     return handleSuccess(data[returnRole]);
   }
 
diff --git a/lib/api/entries.js b/lib/api/entries.js
index f2b47a1d..02685097 100644
--- a/lib/api/entries.js
+++ b/lib/api/entries.js
@@ -12,7 +12,7 @@ import { glossaryTermFragment } from "@/lib/api/fragments/glossary-term";
 import { studentPageFragment } from "./fragments/student-page";
 import { educatorPageFragment } from "./fragments/educator-page";
 import { investigationLandingPageFragment } from "./fragments/investigation-landing-page";
-import { getLocaleString } from "../utils";
+import { getLocaleString } from "@/lib/helpers/site";
 
 function dataListQueryify(fragment) {
   return gql`
diff --git a/lib/api/globals/index.ts b/lib/api/globals/index.ts
new file mode 100644
index 00000000..a9a18b22
--- /dev/null
+++ b/lib/api/globals/index.ts
@@ -0,0 +1,85 @@
+import { gql } from "graphql-request";
+import { fallbackLng } from "@/lib/i18n/settings";
+import { queryAPI } from "@/lib/fetch";
+import { linkFragment } from "@/lib/api/fragments/link";
+import {
+  siteInfoFragment,
+  footerFragment,
+  rootPageInfoFragment,
+  contactFormFragment,
+} from "@/lib/api/fragments/global";
+import { categoriesFragment } from "@/lib/api/fragments/categories";
+import { userProfileFragment } from "@/lib/api/fragments/page";
+import { getSiteFromLocale } from "@/lib/helpers/site";
+
+export async function getGlobalData(locale = fallbackLng) {
+  const site = getSiteFromLocale(locale);
+  const query = gql`
+    ${linkFragment}
+    ${siteInfoFragment}
+    ${footerFragment}
+    ${rootPageInfoFragment}
+    ${contactFormFragment}
+    ${categoriesFragment}
+    ${userProfileFragment}
+    query getGlobalData($site: [String]) {
+      pageTree: entries(
+        section: "pages"
+        site: $site
+        level: 1
+        isVisible: true
+      ) {
+        id
+        title
+        uri
+        children(isVisible: true) {
+          id
+          title
+          uri
+          children(isVisible: true) {
+            id
+            title
+            uri
+          }
+        }
+      }
+      globals: globalSets(site: $site) {
+        ...rootPageInfoFragment
+        ...siteInfoFragment
+        ...footerFragment
+        ...contactFormFragment
+      }
+      allCategories: categories(site: $site) {
+        ...categoriesFragment
+      }
+      userProfilePage: entry(site: $site, type: "userProfilePage") {
+        ...userProfileFragment
+      }
+    }
+  `;
+  const data = await queryAPI(query, undefined, undefined, { site });
+
+  const globals = data.globals
+    ? data.globals.reduce(
+        (prev, current) =>
+          Object.assign(
+            prev,
+            Object.keys(current).length && { [current.handle]: current }
+          ),
+        {}
+      )
+    : {};
+
+  return {
+    categories: data?.allCategories || [],
+    footerContent: globals?.footer || {},
+    contactForm: globals?.contactForm || {},
+    headerNavItems: data?.pageTree || [],
+    rootPages: globals?.rootPageInformation?.customBreadcrumbs || [],
+    siteInfo: globals?.siteInfo || {},
+    userProfilePage: data?.userProfilePage || {},
+    localeInfo: {
+      locale,
+    },
+  };
+}
diff --git a/lib/api/metadata/index.ts b/lib/api/metadata/index.ts
new file mode 100644
index 00000000..390f5fbb
--- /dev/null
+++ b/lib/api/metadata/index.ts
@@ -0,0 +1,45 @@
+import { queryAPI } from "@/lib/fetch";
+import { getSiteFromLocale } from "@/lib/helpers/site";
+import { fallbackLng } from "@/lib/i18n/settings";
+import { gql } from "graphql-request";
+
+export async function getEntryMetadataByUri(
+  uri: string,
+  locale = fallbackLng,
+  previewToken?: string
+) {
+  const site = getSiteFromLocale(locale);
+
+  const query = gql`
+    query EntryMetadata($site: [String], $uri: [String]) {
+      entry(site: $site, uri: $uri) {
+        ... on homepage_homepage_Entry {
+          title
+          description
+        }
+        ... on events_events_Entry {
+          title
+          description
+        }
+        ... on pages_pages_Entry {
+          title
+          description
+        }
+        ... on pages_educatorPages_Entry {
+          description
+          title
+        }
+        ... on pages_studentPages_Entry {
+          description
+          title
+        }
+        ... on pages_investigationLandingPage_Entry {
+          description
+          title
+        }
+      }
+    }
+  `;
+
+  return queryAPI(query, undefined, previewToken, { site, uri });
+}
diff --git a/lib/api/noirlabReleases.js b/lib/api/noirlabReleases.js
index 720c9c60..2362ee9a 100644
--- a/lib/api/noirlabReleases.js
+++ b/lib/api/noirlabReleases.js
@@ -1,5 +1,7 @@
 import useSWR from "swr";
-import { getLocaleString, makeReleaseFeature } from "@/lib/utils";
+import { useMemo } from "react";
+import { getLocaleString } from "@/lib/helpers/site";
+import { makeReleaseFeature } from "@/lib/utils";
 
 // const RELEASE_URL = process.env.NEXT_PUBLIC_RELEASE_URL;
 
@@ -51,9 +53,10 @@ export function useRelease(site, entry) {
 
 export function useReleases(site, entries = []) {
   const locale = getLocaleString(site);
-  const releaseEntries = entries.filter((entry) => entry.pressReleaseId);
-
-  const getRel = (url) => fetch(url).then((res) => res.json());
+  const releaseEntries = useMemo(
+    () => entries.filter((entry) => entry.pressReleaseId),
+    [entries]
+  );
 
   function fetcher(...releaseEntries) {
     const f = (release) => {
diff --git a/lib/helpers/site.ts b/lib/helpers/site.ts
new file mode 100644
index 00000000..236ae821
--- /dev/null
+++ b/lib/helpers/site.ts
@@ -0,0 +1,7 @@
+export const getSiteFromLocale = (locale: string) => {
+  return locale.includes("en") ? "default" : "es";
+};
+
+export function getLocaleString(site: string) {
+  return site.toLowerCase() === "default" ? "en" : site.toLowerCase();
+}
diff --git a/lib/i18n/client.js b/lib/i18n/client.js
index fc247f06..d4cef7c1 100644
--- a/lib/i18n/client.js
+++ b/lib/i18n/client.js
@@ -1,5 +1,6 @@
 import i18n from "i18next";
-import { initReactI18next, useTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
+import { initReactI18next } from "react-i18next/initReactI18next";
 import LanguageDetector from "i18next-browser-languagedetector";
 import {
   defaultNS,
diff --git a/lib/i18n/index.js b/lib/i18n/index.ts
similarity index 83%
rename from lib/i18n/index.js
rename to lib/i18n/index.ts
index b3bab518..3a12be56 100644
--- a/lib/i18n/index.js
+++ b/lib/i18n/index.ts
@@ -1,10 +1,10 @@
 import { createInstance } from "i18next";
 import resourcesToBackend from "i18next-resources-to-backend";
-import { initReactI18next } from "react-i18next";
+import { initReactI18next } from "react-i18next/initReactI18next";
 import { getOptions } from "./settings";
 
 export const loadResources = resourcesToBackend(
-  (language, namespace, callback) => {
+  (language: string, namespace: string, callback) => {
     switch (namespace) {
       case "epo-react-lib":
         import(
@@ -30,7 +30,7 @@ export const loadResources = resourcesToBackend(
   }
 );
 
-const initI18next = async (lng, ns) => {
+const initI18next = async (lng: string, ns: string | string[]) => {
   // on server side we create a new instance for each render, because during compilation everything seems to be executed in parallel
   const i18nInstance = createInstance();
   await i18nInstance
@@ -40,7 +40,11 @@ const initI18next = async (lng, ns) => {
   return i18nInstance;
 };
 
-async function useTranslation(lng, ns, options = {}) {
+async function useTranslation(
+  lng: string,
+  ns: string | string[],
+  options: any = {}
+) {
   const i18nextInstance = await initI18next(lng, ns);
 
   return {
diff --git a/lib/i18n/server.ts b/lib/i18n/server.ts
new file mode 100644
index 00000000..63922ee5
--- /dev/null
+++ b/lib/i18n/server.ts
@@ -0,0 +1,11 @@
+import { cache } from "react";
+import { cookies, headers } from "next/headers";
+import { cookieName, fallbackLng } from "./settings";
+
+export const getLocale = cache(() => {
+  return (
+    headers().get("x-next-intl-locale") ||
+    cookies().get(cookieName)?.value ||
+    fallbackLng
+  );
+});
diff --git a/lib/styles/font.ts b/lib/styles/font.ts
new file mode 100644
index 00000000..41ffd7f4
--- /dev/null
+++ b/lib/styles/font.ts
@@ -0,0 +1,12 @@
+// eslint-disable-next-line camelcase
+import { Source_Sans_3 } from "next/font/google";
+
+const SourceSansPro = Source_Sans_3({
+  weight: ["400", "700", "900"],
+  style: ["normal", "italic"],
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--FONT_STACK_BASE",
+});
+
+export default SourceSansPro;
diff --git a/lib/styles/registry.tsx b/lib/styles/registry.tsx
new file mode 100644
index 00000000..fa12293e
--- /dev/null
+++ b/lib/styles/registry.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import React, { useState } from "react";
+import { useServerInsertedHTML } from "next/navigation";
+import { ServerStyleSheet, StyleSheetManager } from "styled-components";
+
+export default function StyledComponentsRegistry({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // Only create stylesheet once with lazy initial state
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
+
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement();
+    styledComponentsStyleSheet.instance.clearTag();
+    return <>{styles}</>;
+  });
+
+  if (typeof window !== "undefined") return <>{children}</>;
+
+  return (
+    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+      {children}
+    </StyleSheetManager>
+  );
+}
diff --git a/lib/utils.js b/lib/utils.js
index 95b7bdfd..06392054 100644
--- a/lib/utils.js
+++ b/lib/utils.js
@@ -388,20 +388,6 @@ export function getSiteString(langData = "", asLangString = false) {
   }
 }
 
-/**
- * @function getSiteFromLocale
- * @param {string} locale
- */
-export const getSiteFromLocale = (locale) => {
-  return locale.includes("en") ? "default" : "es";
-};
-
-export function getLocaleString(siteString) {
-  return siteString.toLowerCase() === "default"
-    ? "en"
-    : siteString.toLowerCase();
-}
-
 // DAM METADATA
 export const imageShaper = (site, data, className) => {
   if (!data) return undefined;
diff --git a/pages/[locale]/[...uriSegments]/index.js b/pages/[locale]/[...uriSegments]/index.js
index 34fc7d6b..c6891fd8 100644
--- a/pages/[locale]/[...uriSegments]/index.js
+++ b/pages/[locale]/[...uriSegments]/index.js
@@ -6,7 +6,7 @@ import { getEntryDataByUri, getEntrySectionTypeByUri } from "@/api/entry";
 import { getBreadcrumbs } from "@/api/pages";
 import { getGalleryItemDataByUri } from "@/lib/api/gallery-items";
 import { getSlideshowDataByUri } from "@/api/slideshows";
-import { getSiteFromLocale } from "@/lib/utils";
+import { getSiteFromLocale } from "@/lib/helpers/site";
 import { GlobalDataProvider } from "@/contexts/GlobalData";
 import PageTemplate from "@/templates/Page";
 import EventPageTemplate from "@/templates/EventPage";
diff --git a/pages/[locale]/index.js b/pages/[locale]/index.js
deleted file mode 100644
index 800421ec..00000000
--- a/pages/[locale]/index.js
+++ /dev/null
@@ -1,137 +0,0 @@
-import PropTypes from "prop-types";
-import { GoogleOAuthProvider } from "@react-oauth/google";
-import { languages } from "@/lib/i18n/settings";
-import { getGlobalData } from "@/api/global";
-import { getEntrySectionTypeByUri, getEntryDataByUri } from "@/api/entry";
-import { setEdcLog } from "@/lib/edc-log";
-import { getSiteFromLocale } from "@/lib/utils";
-import { purgeNextjsStaticFiles } from "@/lib/purgeStaticFiles";
-import { internalLinkWithChildrenShape } from "@/shapes/link";
-import siteInfoShape from "@/shapes/siteInfo";
-import footerContentShape from "@/shapes/footerContent";
-import rootPagesShape from "@/shapes/rootPages";
-import { GlobalDataProvider } from "@/contexts/GlobalData";
-import HomePageTemplate from "@/templates/HomePage";
-
-const GOOGLE_APP_ID = process.env.NEXT_PUBLIC_GOOGLE_APP_ID;
-const CRAFT_HOMEPAGE_URI = "__home__";
-
-export function getStaticPaths() {
-  return {
-    paths: languages.map((language) => {
-      return { params: { locale: language } };
-    }),
-    fallback: false,
-  };
-}
-
-/** @type {import("next").GetStaticProps } */
-export async function getStaticProps({
-  params: { locale },
-  previewData,
-  draftMode,
-}) {
-  const runId = Date.now().toString();
-  const site = getSiteFromLocale(locale);
-  const uri = CRAFT_HOMEPAGE_URI;
-  const previewToken = draftMode ? previewData?.previewToken : undefined;
-
-  const data = await getGlobalData(site);
-
-  const globals = data.globals
-    ? data.globals.reduce(
-        (obj, item) =>
-          Object.assign(
-            obj,
-            Object.keys(item).length && { [item.handle]: item }
-          ),
-        {}
-      )
-    : {};
-
-  const entrySectionType = await getEntrySectionTypeByUri(
-    uri,
-    site,
-    previewToken
-  );
-
-  const { sectionHandle: section, typeHandle: type } = entrySectionType;
-  const entryData = await getEntryDataByUri(
-    uri,
-    section,
-    type,
-    site,
-    previewToken
-  );
-
-  const currentId = entryData?.id || entryData?.entry?.id;
-
-  const globalData = {
-    categories: data?.allCategories || [],
-    footerContent: globals?.footer || {},
-    contactForm: globals?.contactForm || {},
-    headerNavItems: data?.pageTree || [],
-    rootPages: globals?.rootPageInformation?.customBreadcrumbs || [],
-    siteInfo: globals?.siteInfo || {},
-    localeInfo: {
-      locale: site,
-      language: entryData?.language || entryData?.entry?.language || "",
-      localized: entryData?.localized || entryData?.entry?.localized || [],
-    },
-    userProfilePage: data?.userProfilePage || {},
-  };
-
-  // Handle redirect if the entry has one
-  if (entryData?.typeHandle === "redirectPage" && entryData?.linkTo?.url) {
-    setEdcLog(runId, "Redirect build done for " + uri, "BUILD_REDIRECT");
-    return {
-      redirect: {
-        destination: entryData.linkTo.url,
-        permanent: false,
-      },
-    };
-  }
-
-  // Handle 404 if there is no data
-  if (!currentId) {
-    setEdcLog(runId, "404 encountered building for " + uri, "BUILD_ERROR_404");
-    await purgeNextjsStaticFiles(locale);
-    return {
-      notFound: true,
-      revalidate: 10,
-    };
-  }
-  setEdcLog(runId, "Done building for " + uri, "BUILD_COMPLETE");
-
-  return {
-    props: { locale, data: entryData, section, globalData },
-    revalidate: 300,
-  };
-}
-
-const Homepage = ({ section, globalData, ...entryProps }) => {
-  return (
-    <GoogleOAuthProvider clientId={GOOGLE_APP_ID}>
-      <GlobalDataProvider data={globalData}>
-        <HomePageTemplate {...entryProps} />
-      </GlobalDataProvider>
-    </GoogleOAuthProvider>
-  );
-};
-
-Homepage.propTypes = {
-  data: PropTypes.object,
-  section: PropTypes.string,
-  globalData: PropTypes.exact({
-    categories: PropTypes.array,
-    footerContent: footerContentShape,
-    headerNavItems: PropTypes.arrayOf(internalLinkWithChildrenShape),
-    localeInfo: PropTypes.object,
-    rootPages: rootPagesShape,
-    siteInfo: siteInfoShape,
-    userProfilePage: PropTypes.object,
-    contactForm: PropTypes.object,
-  }),
-};
-
-export default Homepage;
diff --git a/pages/_app.js b/pages/_app.js
index c98d0b04..716cbaff 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -4,7 +4,6 @@ import PropTypes from "prop-types";
 import "focus-visible";
 import Script from "next/script";
 import { AuthenticationContextProvider } from "@/contexts/Authentication";
-import useAuthentication from "@/hooks/useAuthentication";
 import GlobalStyles from "@/styles/globalStyles";
 import "@/styles/styles.scss";
 import useClientTranslation from "@/lib/i18n/client";
@@ -18,15 +17,9 @@ function Client({ Component, pageProps, ...props }) {
   const lang = pageProps?.data?.language || fallbackLng;
   const { i18n } = useClientTranslation(lang);
 
-  const authData = useAuthentication({
-    typeHandle: pageProps?.data?.typeHandle || "",
-    language: lang,
-    localized: pageProps?.data?.localized || [],
-  });
-
   return (
     <I18nextProvider {...{ i18n }}>
-      <AuthenticationContextProvider data={authData}>
+      <AuthenticationContextProvider>
         {PLAUSIBLE_DOMAIN && (
           <Script
             id="plausible-script"
diff --git a/pages/api/preview.js b/pages/api/preview.js
index aa4bc4c1..5336a9ca 100644
--- a/pages/api/preview.js
+++ b/pages/api/preview.js
@@ -1,6 +1,6 @@
 import { gql } from "graphql-request";
 import { queryAPI } from "@/lib/fetch";
-import { getLocaleString, getSiteFromLocale } from "@/lib/utils";
+import { getSiteFromLocale, getLocaleString } from "@/lib/helpers/site";
 
 const PREVIEW_SECRET_TOKEN = process.env.CRAFT_SECRET_TOKEN;
 const CRAFT_HOMEPAGE_URI = "__home__";
@@ -52,7 +52,7 @@ const preview = async (request, response) => {
   response.setDraftMode({ enable: true });
 
   if (res.entry.uri === CRAFT_HOMEPAGE_URI) {
-    const redirect = `/${locale}`;
+    const redirect = `/${locale}?preview=${previewToken}`;
     const cookiePath = isDefaultSite ? "/" : redirect;
 
     response.setPreviewData(
@@ -62,7 +62,7 @@ const preview = async (request, response) => {
     response.redirect(redirect);
   } else {
     const redirectUri = `/${res.entry.uri}`;
-    const redirect = `/${locale}${redirectUri}`;
+    const redirect = `/${locale}${redirectUri}?preview=${previewToken}`;
     const cookiePath = `${
       site === "default" ? "" : `/${locale}`
     }${redirectUri}`;
diff --git a/pages/api/revalidate.js b/pages/api/revalidate.js
index 47b4c9be..c8bc2740 100644
--- a/pages/api/revalidate.js
+++ b/pages/api/revalidate.js
@@ -4,6 +4,9 @@ import { isCraftPreview } from "@/helpers";
 const REVALIDATE_SECRET_TOKEN = process.env.CRAFT_REVALIDATE_SECRET_TOKEN;
 const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
 
+const CRAFT_HOMEPAGE_URI = "__home__";
+const APP_ROUTER_REVALIDATE = [CRAFT_HOMEPAGE_URI];
+
 /**
  * @function preview
  * @param {import("next").NextApiRequest} req
@@ -31,11 +34,14 @@ async function handler(req, res) {
   }
 
   try {
-    const searchParams = new URLSearchParams(query);
-
-    await fetch(`${BASE_URL}/api/app-revalidate?${searchParams.toString()}`);
-    await res.revalidate(`/${query.uri}`);
-    return res.status(200).json({ revalidated: true });
+    if (APP_ROUTER_REVALIDATE.includes(query.uri)) {
+      const searchParams = new URLSearchParams(query);
+      await fetch(`${BASE_URL}/api/app-revalidate?${searchParams.toString()}`);
+      return res.status(200).json({ revalidated: true });
+    } else {
+      await res.revalidate(`/${query.uri}`);
+      return res.status(200).json({ revalidated: true });
+    }
   } catch (error) {
     console.error(error);
     // If there was an error, Next.js will continue
diff --git a/theme/styles/base/_base.scss b/theme/styles/base/_base.scss
index 51bd1bf1..6de52e99 100644
--- a/theme/styles/base/_base.scss
+++ b/theme/styles/base/_base.scss
@@ -3,16 +3,6 @@
 @use "abstracts/mixins/base";
 @use "abstracts/mixins/layout";
 
-// Base
-// --------------------------------------------------------
-
-// Applies a natural box layout model to all the things
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-}
-
 // Global
 // --------------------------
 html {
@@ -26,7 +16,7 @@ html {
 
 body {
   color: functions.sass-palette(neutral80);
-  background-color: functions.palette(white);
+  background-color: var(--neutral08);
 }
 
 // next.js nests a `div#__next` inside `body`
@@ -48,15 +38,6 @@ img {
   display: block;
   width: 100%;
   height: auto;
-
-  &[loading] {
-    opacity: 0;
-    transition: opacity 0.4s 0.1s;
-
-    &.is-loaded {
-      opacity: 1;
-    }
-  }
 }
 
 a {
diff --git a/theme/styles/globalStyles.js b/theme/styles/globalStyles.js
index a31fa29a..80d6433c 100644
--- a/theme/styles/globalStyles.js
+++ b/theme/styles/globalStyles.js
@@ -1,3 +1,4 @@
+"use client";
 /* eslint-disable */
 import { createGlobalStyle } from "styled-components";
 import { fluidScaleBase, stripUnit, respondBase } from "@castiron/style-mixins";
diff --git a/tsconfig.json b/tsconfig.json
index 8d43d18f..3491efe2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,18 +1,14 @@
 {
   "compilerOptions": {
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
     "noEmit": true,
     "incremental": true,
-    "module": "esnext",
+    "module": "NodeNext",
     "esModuleInterop": true,
-    "moduleResolution": "node",
+    "moduleResolution": "nodenext",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
@@ -24,78 +20,39 @@
     "baseUrl": ".",
     "strictNullChecks": true,
     "paths": {
-      "@/lib/*": [
-        "lib/*"
-      ],
-      "@/api/*": [
-        "lib/api/*"
-      ],
-      "@/charts/*": [
-        "charts/*"
-      ],
-      "@/components/*": [
-        "components/*"
-      ],
-      "@/content-blocks": [
-        "components/content-blocks"
-      ],
-      "@/dynamic/*": [
-        "components/dynamic/*"
-      ],
-      "@/factories/*": [
-        "components/factories/*"
-      ],
-      "@/atomic/*": [
-        "components/atomic/*"
-      ],
-      "@/layout/*": [
-        "components/layout/*"
-      ],
-      "@/templates/*": [
-        "components/templates/*"
-      ],
-      "@/global/*": [
-        "components/global/*"
-      ],
-      "@/page/*": [
-        "components/page/*"
-      ],
-      "@/shapes/*": [
-        "components/shapes/*"
-      ],
-      "@/hooks/*": [
-        "hooks/*"
-      ],
-      "@/hooks": [
-        "hooks"
-      ],
-      "@/contexts/*": [
-        "contexts/*"
-      ],
-      "@/styles/*": [
-        "theme/styles/*"
-      ],
-      "@/svg/*": [
-        "components/svg/*"
-      ],
-      "@/helpers": [
-        "helpers"
-      ],
-      "@/helpers/*": [
-        "helpers/*"
-      ],
-      "@/hoc/*": [
-        "components/hoc/*"
-      ]
+      "@/lib/*": ["lib/*"],
+      "@/api/*": ["lib/api/*"],
+      "@/charts/*": ["charts/*"],
+      "@/components/*": ["components/*"],
+      "@/content-blocks": ["components/content-blocks"],
+      "@/dynamic/*": ["components/dynamic/*"],
+      "@/factories/*": ["components/factories/*"],
+      "@/atomic/*": ["components/atomic/*"],
+      "@/layout/*": ["components/layout/*"],
+      "@/templates/*": ["components/templates/*"],
+      "@/global/*": ["components/global/*"],
+      "@/page/*": ["components/page/*"],
+      "@/shapes/*": ["components/shapes/*"],
+      "@/hooks/*": ["hooks/*"],
+      "@/hooks": ["hooks"],
+      "@/contexts/*": ["contexts/*"],
+      "@/styles/*": ["theme/styles/*"],
+      "@/svg/*": ["components/svg/*"],
+      "@/helpers": ["helpers"],
+      "@/helpers/*": ["helpers/*"],
+      "@/hoc/*": ["components/hoc/*"]
     }
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"],
+  // Old "moduleResolution": "Node" option required for Cypress
+  // https://github.com/cypress-io/cypress/issues/26308#issuecomment-1663592648
+  //
+  // TODO: Remove when issue is resolved https://github.com/cypress-io/cypress/issues/27448
+  "ts-node": {
+    "compilerOptions": {
+      "module": "ESNext",
+      "moduleResolution": "Node"
+    }
+  }
 }
diff --git a/types/next.d.ts b/types/next.d.ts
new file mode 100644
index 00000000..0edb4e9c
--- /dev/null
+++ b/types/next.d.ts
@@ -0,0 +1,14 @@
+type SearchParams = Record<string, string | Array<string> | undefined>;
+type LocaleParams = {
+  locale: string;
+};
+
+interface LocaleProps {
+  params: LocaleParams;
+  searchParams?: SearchParams;
+}
+
+interface ErrorProps {
+  error: Error & { digest?: string };
+  reset: () => void;
+}