Fixes issues in v5 (due to #264) (#274)

src/app/components/MultiversalAppBootstrap.tsx

@@ -9,6 +9,7 @@ import { CustomerTheme } from '@/modules/core/data/types/CustomerTheme';
 import { SanitizedAirtableDataset } from '@/modules/core/data/types/SanitizedAirtableDataset';
 import DefaultErrorLayout from '@/modules/core/errorHandling/DefaultErrorLayout';
 import i18nContext from '@/modules/core/i18n/contexts/i18nContext';
+import { DEFAULT_LOCALE } from '@/modules/core/i18n/i18n';
 import i18nextLocize from '@/modules/core/i18n/i18nextLocize';
 import {
   i18nRedirect,
@@ -212,6 +213,13 @@ const MultiversalAppBootstrap: React.FunctionComponent<Props> = (props): JSX.Ele
 
     const dataset: SanitizedAirtableDataset = deserializeSafe(serializedDataset);
     const customer: AirtableRecord<Customer> = find(dataset, { __typename: 'Customer' }) as AirtableRecord<Customer>;
+    let availableLanguages: string[] = customer?.availableLanguages;
+
+    if (isEmpty(availableLanguages)) {
+      // If no language have been set, apply default (fallback)
+      // XXX Applying proper default is critical to avoid an infinite loop
+      availableLanguages = [DEFAULT_LOCALE];
+    }
 
     if (process.env.NEXT_PUBLIC_APP_STAGE !== 'production' && isBrowser()) {
       // eslint-disable-next-line no-console
@@ -222,9 +230,11 @@ const MultiversalAppBootstrap: React.FunctionComponent<Props> = (props): JSX.Ele
 
     // If the locale used to display the page isn't available for this customer
     // TODO This should be replaced by something better, ideally the pages for non-available locales shouldn't be generated at all and then this wouldn't be needed
-    if (!includes(customer?.availableLanguages, locale) && isBrowser()) {
+    if (!includes(availableLanguages, locale) && isBrowser()) {
       // Then redirect to the same page using another locale (using the first available locale)
-      i18nRedirect(customer?.availableLanguages?.[0], router);
+      // XXX Be extra careful with this kind of redirects based on remote data!
+      //  It's easy to create an infinite redirect loop when the data aren't shaped as expected.
+      i18nRedirect(availableLanguages?.[0] || DEFAULT_LOCALE, router);
       return null;
     }
 

src/app/types/CommonServerSideParams.ts

@@ -1,13 +1,13 @@
 import { ParsedUrlQuery } from 'querystring';
 
 /**
- * Server side params provided to any page (SSG or SSR)
- *  - Static params provided to getStaticProps and getStaticPaths for static pages (when building SSG pages)
- *  - Dynamic params provided to getServerSideProps (when using SSR)
+ * Server side params provided to any page (SSG or SSR), no matter what layout is used.
+ *  - Static params provided to getStaticProps and getStaticPaths for static pages (when building SSG pages).
+ *  - Dynamic params provided to getServerSideProps (when using SSR).
  *
- * Those params come from the route (url) being used, they are affected by "redirects" and the route name (e.g: "/folder/[id].tsx"
+ * Those params come from the route (url) being used, they are affected by "redirects" and the route name (e.g: "/folder/[id].tsx".
  *
- * @see next.config.js "redirects" section for url params
+ * @see next.config.js "redirects" section for url params.
  */
 export type CommonServerSideParams<E extends ParsedUrlQuery = ParsedUrlQuery> = {
   albumId?: string; // Used by album-[albumId]-with-ssg-and-fallback page

src/layouts/demo/components/NativeFeaturesSection.tsx

@@ -84,8 +84,8 @@ const NativeFeaturesSection: React.FunctionComponent<Props> = (props): JSX.Eleme
 
               <p>
                 We also strongly recommend using SSG, whenever possible.<br />
-                SSG can only be used using <code>getStaticProps</code>, NRN provides a <code>getCommonStaticProps</code> helper
-                to configure common stuff between all SSG-based pages and reduce code duplication.
+                SSG can only be used using <code>getStaticProps</code>, NRN provides a <code>getDefaultStaticProps</code> helper
+                to configure common stuff between all SSG-based pages using the <code>default</code> layout, and help reduce code duplication.
               </p>
 
               <div className={'buttons'}>

src/layouts/demo/demoSSR.ts

@@ -37,7 +37,7 @@ import NextCookies from 'next-cookies';
  * getDemoServerSideProps returns only part of the props expected in SSRPageProps
  * To avoid TS issue, we omit those that we don't return, and add those necessary to the getServerSideProps function
  */
-export type GetCommonServerSidePropsResults = SSRPageProps & {
+export type GetDemoServerSidePropsResults = SSRPageProps & {
   headers: PublicHeaders;
 }
 
@@ -54,7 +54,7 @@ export type GetCommonServerSidePropsResults = SSRPageProps & {
  *
  * @see https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering
  */
-export const getDemoServerSideProps: GetServerSideProps<GetCommonServerSidePropsResults, CommonServerSideParams> = async (context: GetServerSidePropsContext<CommonServerSideParams>): Promise<GetServerSidePropsResult<GetCommonServerSidePropsResults>> => {
+export const getDemoServerSideProps: GetServerSideProps<GetDemoServerSidePropsResults, CommonServerSideParams> = async (context: GetServerSidePropsContext<CommonServerSideParams>): Promise<GetServerSidePropsResult<GetDemoServerSidePropsResults>> => {
   const {
     query,
     params,

src/modules/core/serializeSafe/deserializeSafe.ts

@@ -1,6 +1,4 @@
 import { parse as parseSafe } from 'flatted';
-import { RawAirtableDataset } from '../data/types/RawAirtableDataset';
-import { SanitizedAirtableDataset } from '../data/types/SanitizedAirtableDataset';
 
 export const deserializeSafe = <T>(serializedValue: string): T => {
   return parseSafe(serializedValue);

src/modules/core/serializeSafe/serializeSafe.ts

@@ -1,6 +1,6 @@
 import { stringify as stringifySafe } from 'flatted';
-import { Flatted } from './types/Flatted';
 import { GenericObject } from '../data/types/GenericObject';
+import { Flatted } from './types/Flatted';
 
 export const serializeSafe = <T>(value: GenericObject | any[]): Flatted<T> => {
   return stringifySafe(value);

src/pages/[locale]/demo/built-in-features/api.tsx

@@ -289,7 +289,7 @@ const ExampleApiPage: NextPage<Props> = (props): JSX.Element => {
         <br />
 
         <p>
-          The above code is what we actually use in <code>getCommonStaticProps</code>, to fetch data that are shared by all SSG pages.
+          The above code is what we actually use in <code>getDefaultStaticProps</code>, to fetch data that are shared by all SSG pages using the <code>default</code> layout.
         </p>
 
         <hr />

src/pages/[locale]/pageTemplateSSG.tsx

@@ -1,7 +1,7 @@
 import { CommonServerSideParams } from '@/app/types/CommonServerSideParams';
 import { OnlyBrowserPageProps } from '@/layouts/core/types/OnlyBrowserPageProps';
 import { SSGPageProps } from '@/layouts/core/types/SSGPageProps';
-import Layout from '@/layouts/default/components/DefaultLayout';
+import DefaultLayout from '@/layouts/default/components/DefaultLayout';
 import {
   getDefaultStaticPaths,
   getDefaultStaticProps,
@@ -51,7 +51,7 @@ const PageTemplateSSG: NextPage<Props> = (props): JSX.Element => {
   const customer: Customer = useCustomer();
 
   return (
-    <Layout
+    <DefaultLayout
       {...props}
       pageName={'pageTemplateSSG'}
     >
@@ -62,7 +62,7 @@ const PageTemplateSSG: NextPage<Props> = (props): JSX.Element => {
       <p>
         Customer label: {customer.label}
       </p>
-    </Layout>
+    </DefaultLayout>
   );
 };
 

src/pages/[locale]/pageTemplateSSR.tsx

@@ -1,7 +1,7 @@
 import { OnlyBrowserPageProps } from '@/layouts/core/types/OnlyBrowserPageProps';
 import { SSGPageProps } from '@/layouts/core/types/SSGPageProps';
 import { SSRPageProps } from '@/layouts/core/types/SSRPageProps';
-import Layout from '@/layouts/default/components/DefaultLayout';
+import DefaultLayout from '@/layouts/default/components/DefaultLayout';
 import { getDefaultServerSideProps } from '@/layouts/default/defaultSSR';
 import useCustomer from '@/modules/core/data/hooks/useCustomer';
 import { Customer } from '@/modules/core/data/types/Customer';
@@ -48,7 +48,7 @@ const PageTemplateSSR: NextPage<Props> = (props): JSX.Element => {
   const customer: Customer = useCustomer();
 
   return (
-    <Layout
+    <DefaultLayout
       {...props}
       pageName={'products'}
     >
@@ -59,7 +59,7 @@ const PageTemplateSSR: NextPage<Props> = (props): JSX.Element => {
       <p>
         Customer label: {customer.label}
       </p>
-    </Layout>
+    </DefaultLayout>
   );
 };
 

src/pages/[locale]/privacy.tsx

@@ -2,7 +2,7 @@ import { CommonServerSideParams } from '@/app/types/CommonServerSideParams';
 import LegalContent from '@/common/components/dataDisplay/LegalContent';
 import { OnlyBrowserPageProps } from '@/layouts/core/types/OnlyBrowserPageProps';
 import { SSGPageProps } from '@/layouts/core/types/SSGPageProps';
-import Layout from '@/layouts/default/components/DefaultLayout';
+import DefaultLayout from '@/layouts/default/components/DefaultLayout';
 import {
   getDefaultStaticPaths,
   getDefaultStaticProps,
@@ -70,15 +70,15 @@ const PrivacyPage: NextPage<Props> = (props): JSX.Element => {
   });
 
   return (
-    <Layout
+    <DefaultLayout
       {...props}
       pageName={AMPLITUDE_PAGES.PRIVACY_PAGE}
     >
       <h2>Field's value (fetched from Airtable API), as <code>Long text</code> (interpreted as Markdown):</h2>
       <LegalContent
         content={privacy}
       />
-    </Layout>
+    </DefaultLayout>
   );
 };
 

src/pages/[locale]/terms.tsx

@@ -2,7 +2,7 @@ import { CommonServerSideParams } from '@/app/types/CommonServerSideParams';
 import LegalContent from '@/common/components/dataDisplay/LegalContent';
 import { OnlyBrowserPageProps } from '@/layouts/core/types/OnlyBrowserPageProps';
 import { SSGPageProps } from '@/layouts/core/types/SSGPageProps';
-import Layout from '@/layouts/default/components/DefaultLayout';
+import DefaultLayout from '@/layouts/default/components/DefaultLayout';
 import {
   getDefaultStaticPaths,
   getDefaultStaticProps,
@@ -58,7 +58,10 @@ type Props = {} & SSGPageProps<Partial<OnlyBrowserPageProps>>;
  */
 const TermsPage: NextPage<Props> = (props): JSX.Element => {
   const customer: Customer = useCustomer();
-  const { termsDescription, serviceLabel } = customer || {};
+  const {
+    termsDescription,
+    serviceLabel,
+  } = customer || {};
 
   // Replace dynamic values (like "{customerLabel}") by their actual value
   const terms = replaceAllOccurrences(termsDescription, {
@@ -67,14 +70,14 @@ const TermsPage: NextPage<Props> = (props): JSX.Element => {
   });
 
   return (
-    <Layout
+    <DefaultLayout
       {...props}
       pageName={AMPLITUDE_PAGES.TERMS_PAGE}
     >
       <LegalContent
         content={terms}
       />
-    </Layout>
+    </DefaultLayout>
   );
 };