Next.js app router migration

.github/workflows/cypress-release-test.yml

@@ -2,7 +2,7 @@ name: Cypress release tests
 
 on:
   push:
-    branches: [develop, dependabot/**, '*test*']
+    branches: [develop, dependabot/**, '*test*', 'app-migration-layouts']
 
 jobs:
   # vercel will redeploy the develop/staging app on creating a PR to main
@@ -65,7 +65,7 @@ jobs:
           NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: ${{ secrets.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET }}
           NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID}}
           NEXT_PUBLIC_FIREBASE_APP_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_APP_ID }}
-          NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID }}
+          NEXT_PUBLIC_GOOGLE_ANALYTICS_ID: ${{ secrets.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID }}
           CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
           CYPRESS_BASE_URL: ${{ needs.wait-for-vercel-deployment.outputs.preview_url }}
           CYPRESS_MAIL_SLURP_API_KEY: ${{secrets.CYPRESS_MAIL_SLURP_API_KEY}}
@@ -100,7 +100,7 @@ jobs:
           NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: ${{ secrets.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET }}
           NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID}}
           NEXT_PUBLIC_FIREBASE_APP_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_APP_ID }}
-          NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID }}
+          NEXT_PUBLIC_GOOGLE_ANALYTICS_ID: ${{ secrets.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID }}
           CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
           CYPRESS_BASE_URL: ${{ needs.wait-for-vercel-deployment.outputs.preview_url }}
           CYPRESS_SUPER_ADMIN_EMAIL: ${{secrets.CYPRESS_SUPER_ADMIN_EMAIL}}

.github/workflows/cypress-test.yml

@@ -80,7 +80,7 @@ jobs:
           NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: ${{ secrets.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET }}
           NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID}}
           NEXT_PUBLIC_FIREBASE_APP_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_APP_ID }}
-          NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID }}
+          NEXT_PUBLIC_GOOGLE_ANALYTICS_ID: ${{ secrets.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID }}
           CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
           CYPRESS_BASE_URL: ${{ secrets.NEXT_PUBLIC_BASE_URL }}
           CYPRESS_MAIL_SLURP_API_KEY: ${{secrets.CYPRESS_MAIL_SLURP_API_KEY}}

.gitignore

@@ -49,9 +49,6 @@ yarn-error.log*
 cypress.env.json
 /.nyc_output
 
-# Partytown
-/public/~partytown
-
 # New Relic
 newrelic_agent.log
 

app/[locale]/[slug]/page.tsx

@@ -0,0 +1,77 @@
+import StoryblokPage, { StoryblokPageProps } from '@/components/storyblok/StoryblokPage';
+import { getStoryblokApi, ISbStoriesParams } from '@storyblok/react/rsc';
+
+import { routing } from '@/i18n/routing';
+import { getStoryblokStory } from '@/lib/storyblok';
+import { generateMetadataBasic } from '@/lib/utils/generateMetadataBase';
+import { notFound } from 'next/navigation';
+
+export const dynamicParams = false;
+export const revalidate = 14400; // invalidate every 4 hours
+
+type Params = Promise<{ locale: string; slug: string }>;
+
+async function getStory(locale: string, slug: string) {
+  return await getStoryblokStory(slug, locale);
+}
+
+export async function generateMetadata({ params }: { params: Params }) {
+  const { locale, slug } = await params;
+  const story = await getStory(locale, slug);
+
+  if (!story) return;
+
+  return generateMetadataBasic({
+    title: story.content.title,
+    description: story.content.seo_description,
+  });
+}
+
+export async function generateStaticParams() {
+  let paths: { slug: string; locale: string }[] = [];
+
+  const locales = routing.locales;
+  const storyblokApi = getStoryblokApi();
+
+  let sbParams: ISbStoriesParams = {
+    version: 'published',
+  };
+
+  const { data } = await storyblokApi.get('cdn/links/', sbParams);
+
+  const excludePaths: string[] = [
+    'home',
+    'welcome',
+    'meet-the-team',
+    'courses',
+    'about-our-courses',
+    'messaging',
+    'shorts',
+    'conversations',
+  ];
+
+  Object.keys(data.links).forEach((linkKey) => {
+    const story = data.links[linkKey];
+    const slug = story.slug;
+    const basePath = slug.split('/')[0];
+
+    if (story.is_folder || !story.published || excludePaths.includes(basePath)) return;
+
+    for (const locale of locales) {
+      paths.push({ slug, locale });
+    }
+  });
+  return paths;
+}
+
+export default async function Page({ params }: { params: Params }) {
+  const { locale, slug } = await params;
+
+  const story = await getStory(locale, slug);
+
+  if (!story) {
+    notFound();
+  }
+
+  return <StoryblokPage {...(story.content as StoryblokPageProps)} />;
+}

app/[locale]/account/about-you/page.tsx

@@ -0,0 +1,18 @@
+import { generateMetadataBasic } from '@/lib/utils/generateMetadataBase';
+import { getTranslations } from 'next-intl/server';
+import AboutYouPage from '../../../../components/pages/AboutYouPage';
+
+type Params = Promise<{ locale: string }>;
+
+export const dynamic = 'force-dynamic';
+
+export async function generateMetadata({ params }: { params: Params }) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: 'Account.aboutYou' });
+
+  return generateMetadataBasic({ title: t('title') });
+}
+
+export default function Page() {
+  return <AboutYouPage />;
+}

app/[locale]/account/apply-a-code/page.tsx

@@ -0,0 +1,16 @@
+import ApplyACodePage from '@/components/pages/ApplyACodePage';
+import { generateMetadataBasic } from '@/lib/utils/generateMetadataBase';
+import { getTranslations } from 'next-intl/server';
+
+type Params = Promise<{ locale: string }>;
+
+export async function generateMetadata({ params }: { params: Params }) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: 'Account.applyCode' });
+
+  return generateMetadataBasic({ title: t('title') });
+}
+
+export default function Page() {
+  return <ApplyACodePage />;
+}

app/[locale]/account/disable-service-emails/page.tsx

@@ -0,0 +1,16 @@
+import { generateMetadataBasic } from '@/lib/utils/generateMetadataBase';
+import { getTranslations } from 'next-intl/server';
+import DisableServiceEmailsPage from '../../../../components/pages/DisableServiceEmailsPage';
+
+type Params = Promise<{ locale: string }>;
+
+export async function generateMetadata({ params }: { params: Params }) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: 'Account.disableServiceEmails' });
+
+  return generateMetadataBasic({ title: t('title') });
+}
+
+export default function Page() {
+  return <DisableServiceEmailsPage />;
+}

app/[locale]/account/settings/page.tsx

@@ -0,0 +1,16 @@
+import SettingsPage from '@/components/pages/SettingsPage';
+import { generateMetadataBasic } from '@/lib/utils/generateMetadataBase';
+import { getTranslations } from 'next-intl/server';
+
+type Params = Promise<{ locale: string }>;
+
+export async function generateMetadata({ params }: { params: Params }) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: 'Account.accountSettings' });
+
+  return generateMetadataBasic({ title: t('title') });
+}
+
+export default function Page() {
+  return <SettingsPage />;
+}

app/[locale]/action-handler/page.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { useRouter } from '@/i18n/routing';
+import { notFound, redirect, useSearchParams } from 'next/navigation';
+
+export const dynamic = 'force-dynamic';
+
+// Page to handle redirects from external tools. E.g. firebase auth emails redirect to /action-handler?mode=resetPassword&oobCode....
+export default function Page() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  let modeParam = searchParams.get('mode');
+
+  if (modeParam && modeParam === 'resetPassword') {
+    redirect(`/auth/reset-password?oobCode=${searchParams.get('oobCode')}`);
+  } else {
+    notFound();
+  }
+}

app/[locale]/admin/dashboard/page.tsx

@@ -0,0 +1,16 @@
+import { generateMetadataBasic } from '@/lib/utils/generateMetadataBase';
+import { getTranslations } from 'next-intl/server';
+import AdminDashboardPage from '../../../../components/pages/AdminDashboardPage';
+
+type Params = Promise<{ locale: string }>;
+
+export async function generateMetadata({ params }: { params: Params }) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: 'Admin' });
+
+  return generateMetadataBasic({ title: t('title') });
+}
+
+export default function Page() {
+  return <AdminDashboardPage />;
+}

app/[locale]/auth/login/page.tsx

@@ -0,0 +1,16 @@
+import { generateMetadataBasic } from '@/lib/utils/generateMetadataBase';
+import { getTranslations } from 'next-intl/server';
+import LoginPage from '../../../../components/pages/LoginPage';
+
+type Params = Promise<{ locale: string }>;
+
+export async function generateMetadata({ params }: { params: Params }) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: 'Auth.login' });
+
+  return generateMetadataBasic({ title: t('title') });
+}
+
+export default function Page() {
+  return <LoginPage />;
+}

app/[locale]/auth/register/page.tsx

@@ -0,0 +1,18 @@
+import { generateMetadataBasic } from '@/lib/utils/generateMetadataBase';
+import { getTranslations } from 'next-intl/server';
+import RegisterPage from '../../../../components/pages/RegisterPage';
+
+type Params = Promise<{ locale: string }>;
+
+export const dynamic = 'force-dynamic';
+
+export async function generateMetadata({ params }: { params: Params }) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: 'Auth.register' });
+
+  return generateMetadataBasic({ title: t('title') });
+}
+
+export default function Page() {
+  return <RegisterPage />;
+}

app/[locale]/auth/reset-password/page.tsx

@@ -0,0 +1,18 @@
+import { generateMetadataBasic } from '@/lib/utils/generateMetadataBase';
+import { getTranslations } from 'next-intl/server';
+import ResetPasswordPage from '../../../../components/pages/ResetPasswordPage';
+
+export const dynamic = 'force-dynamic';
+
+type Params = Promise<{ locale: string }>;
+
+export async function generateMetadata({ params }: { params: Params }) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: 'Auth.resetPassword' });
+
+  return generateMetadataBasic({ title: t('title') });
+}
+
+export default function Page() {
+  return <ResetPasswordPage />;
+}

app/[locale]/conversations/[slug]/page.tsx

@@ -0,0 +1,83 @@
+import StoryblokResourceConversationPage, {
+  StoryblokResourceConversationPageProps,
+} from '@/components/storyblok/StoryblokResourceConversationPage';
+import { routing } from '@/i18n/routing';
+import { getStoryblokStory } from '@/lib/storyblok';
+import { generateMetadataBasic } from '@/lib/utils/generateMetadataBase';
+import { getStoryblokApi, ISbStoriesParams } from '@storyblok/react/rsc';
+import { getTranslations } from 'next-intl/server';
+import { notFound } from 'next/navigation';
+
+export const dynamicParams = false;
+export const revalidate = 14400; // invalidate every 4 hours
+
+type Params = Promise<{ locale: string; slug: string }>;
+
+async function getStory(locale: string, slug: string) {
+  return await getStoryblokStory(`conversations/${slug}`, locale, {
+    resolve_relations: ['resource_conversation.related_content'],
+  });
+}
+
+export async function generateMetadata({ params }: { params: Params }) {
+  const { locale, slug } = await params;
+  const t = await getTranslations({ locale, namespace: 'Resources' });
+  const story = await getStory(locale, slug);
+
+  if (!story) return;
+
+  return generateMetadataBasic({
+    title: story.content.name,
+    titleParent: t('conversations'),
+    description: story.content.seo_description,
+  });
+}
+
+export async function generateStaticParams() {
+  let paths: { slug: string; locale: string }[] = [];
+
+  const locales = routing.locales;
+  const storyblokApi = getStoryblokApi();
+
+  let sbParams: ISbStoriesParams = {
+    version: 'published',
+    starts_with: 'conversations/',
+    filter_query: {
+      component: {
+        in: 'resource_conversation',
+      },
+    },
+  };
+
+  const { data } = await storyblokApi.get('cdn/links/', sbParams);
+
+  Object.keys(data.links).forEach((linkKey) => {
+    const story = data.links[linkKey];
+
+    if (!story.slug || !story.published) return;
+
+    const slug = story.slug.split('/')[1];
+
+    for (const locale of locales) {
+      paths.push({ slug, locale });
+    }
+  });
+  return paths;
+}
+
+export default async function Page({ params }: { params: Params }) {
+  const { locale, slug } = await params;
+
+  const story = await getStory(locale, slug);
+
+  if (!story) {
+    notFound();
+  }
+
+  return (
+    <StoryblokResourceConversationPage
+      {...(story.content as StoryblokResourceConversationPageProps)}
+      storyId={story.id}
+    />
+  );
+}