feat(core): fetch locales at build time

.changeset/cuddly-boats-teach.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": minor
+---
+
+fetch available locales at build time

core/.gitignore

@@ -43,3 +43,6 @@ client/generated
 
 # secrets
 .catalyst
+
+# Build config
+build-config.json

core/app/[locale]/(default)/(auth)/login/page.tsx

@@ -2,7 +2,7 @@ import { getTranslations, setRequestLocale } from 'next-intl/server';
 
 import { Link } from '~/components/link';
 import { Button } from '~/components/ui/button';
-import { locales, LocaleType } from '~/i18n/routing';
+import { locales } from '~/i18n/routing';
 
 import { LoginForm } from './_components/login-form';
 
@@ -19,7 +19,7 @@ export async function generateMetadata({ params }: Props) {
 }
 
 interface Props {
-  params: Promise<{ locale: LocaleType }>;
+  params: Promise<{ locale: string }>;
 }
 
 export default async function Login({ params }: Props) {

core/app/[locale]/(default)/(faceted)/brand/[slug]/page.tsx

@@ -4,7 +4,6 @@ import { getTranslations, setRequestLocale } from 'next-intl/server';
 
 import { ProductCard } from '~/components/product-card';
 import { Pagination } from '~/components/ui/pagination';
-import { LocaleType } from '~/i18n/routing';
 
 import { FacetedSearch } from '../../_components/faceted-search';
 import { MobileSideNav } from '../../_components/mobile-side-nav';
@@ -16,7 +15,7 @@ import { getBrand } from './page-data';
 interface Props {
   params: Promise<{
     slug: string;
-    locale: LocaleType;
+    locale: string;
   }>;
   searchParams: Promise<Record<string, string | string[] | undefined>>;
 }

core/app/[locale]/(default)/(faceted)/category/[slug]/page.tsx

@@ -5,7 +5,6 @@ import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { Breadcrumbs } from '~/components/breadcrumbs';
 import { ProductCard } from '~/components/product-card';
 import { Pagination } from '~/components/ui/pagination';
-import { LocaleType } from '~/i18n/routing';
 
 import { FacetedSearch } from '../../_components/faceted-search';
 import { MobileSideNav } from '../../_components/mobile-side-nav';
@@ -20,7 +19,7 @@ import { getCategoryPageData } from './page-data';
 interface Props {
   params: Promise<{
     slug: string;
-    locale: LocaleType;
+    locale: string;
   }>;
   searchParams: Promise<Record<string, string | string[] | undefined>>;
 }

core/app/[locale]/(default)/account/(tabs)/layout.tsx

@@ -1,12 +1,10 @@
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { PropsWithChildren } from 'react';
 
-import { LocaleType } from '~/i18n/routing';
-
 import { TabNavigation, TabType } from './_components/tab-navigation';
 
 interface Props extends PropsWithChildren {
-  params: Promise<{ locale: LocaleType; tab?: TabType }>;
+  params: Promise<{ locale: string; tab?: TabType }>;
 }
 
 export default async function AccountTabLayout({ children, params }: Props) {

core/app/[locale]/(default)/account/(tabs)/settings/change-password/page.tsx

@@ -1,7 +1,5 @@
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 
-import { LocaleType } from '~/i18n/routing';
-
 import { TabHeading } from '../../_components/tab-heading';
 
 import { ChangePasswordForm } from './_components/change-password-form';
@@ -15,7 +13,7 @@ export async function generateMetadata() {
 }
 
 interface Props {
-  params: Promise<{ locale: LocaleType }>;
+  params: Promise<{ locale: string }>;
 }
 
 export default async function ChangePassword({ params }: Props) {

core/app/[locale]/(default)/blog/page.tsx

@@ -4,12 +4,11 @@ import { getTranslations } from 'next-intl/server';
 
 import { BlogPostCard } from '~/components/blog-post-card';
 import { Pagination } from '~/components/ui/pagination';
-import { LocaleType } from '~/i18n/routing';
 
 import { getBlogPosts } from './page-data';
 
 interface Props {
-  params: Promise<{ locale: LocaleType }>;
+  params: Promise<{ locale: string }>;
   searchParams: Promise<Record<string, string | string[] | undefined>>;
 }
 

core/app/[locale]/(default)/layout.tsx

@@ -4,10 +4,9 @@ import { PropsWithChildren, Suspense } from 'react';
 import { Footer } from '~/components/footer/footer';
 import { Header, HeaderSkeleton } from '~/components/header';
 import { Cart } from '~/components/header/cart';
-import { LocaleType } from '~/i18n/routing';
 
 interface Props extends PropsWithChildren {
-  params: Promise<{ locale: LocaleType }>;
+  params: Promise<{ locale: string }>;
 }
 
 export default async function DefaultLayout({ params, children }: Props) {

core/app/[locale]/(default)/page.tsx

@@ -8,7 +8,6 @@ import { revalidate } from '~/client/revalidate-target';
 import { ProductCardCarousel } from '~/components/product-card-carousel';
 import { ProductCardCarouselFragment } from '~/components/product-card-carousel/fragment';
 import { Slideshow } from '~/components/slideshow';
-import { LocaleType } from '~/i18n/routing';
 
 const HomePageQuery = graphql(
   `
@@ -35,7 +34,7 @@ const HomePageQuery = graphql(
 );
 
 interface Props {
-  params: Promise<{ locale: LocaleType }>;
+  params: Promise<{ locale: string }>;
 }
 
 export default async function Home({ params }: Props) {

core/app/[locale]/(default)/product/[slug]/page.tsx

@@ -5,7 +5,6 @@ import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { Suspense } from 'react';
 
 import { Breadcrumbs } from '~/components/breadcrumbs';
-import { LocaleType } from '~/i18n/routing';
 
 import { Description } from './_components/description';
 import { Details } from './_components/details';
@@ -17,7 +16,7 @@ import { Warranty } from './_components/warranty';
 import { getProduct } from './page-data';
 
 interface Props {
-  params: Promise<{ slug: string; locale: LocaleType }>;
+  params: Promise<{ slug: string; locale: string }>;
   searchParams: Promise<Record<string, string | string[] | undefined>>;
 }
 

core/app/[locale]/(default)/product/[slug]/static/page.tsx

@@ -7,7 +7,7 @@ import { getChannelIdFromLocale } from '~/channels.config';
 import { client } from '~/client';
 import { graphql } from '~/client/graphql';
 import { revalidate as revalidateTarget } from '~/client/revalidate-target';
-import { locales, LocaleType } from '~/i18n/routing';
+import { locales } from '~/i18n/routing';
 
 import ProductPage from '../page';
 import { getProduct } from '../page-data';
@@ -60,7 +60,7 @@ export async function generateStaticParams() {
 }
 
 interface Props {
-  params: Promise<{ slug: string; locale: LocaleType }>;
+  params: Promise<{ slug: string; locale: string }>;
 }
 
 export async function generateMetadata(props: Props): Promise<Metadata> {

core/app/[locale]/maintenance/page.tsx

@@ -6,7 +6,6 @@ import { client } from '~/client';
 import { graphql } from '~/client/graphql';
 import { StoreLogo } from '~/components/store-logo';
 import { StoreLogoFragment } from '~/components/store-logo/fragment';
-import { LocaleType } from '~/i18n/routing';
 
 const MaintenancePageQuery = graphql(
   `
@@ -38,7 +37,7 @@ const Container = ({ children }: { children: ReactNode }) => (
 );
 
 interface Props {
-  params: Promise<{ locale: LocaleType }>;
+  params: Promise<{ locale: string }>;
 }
 
 export default async function Maintenance({ params }: Props) {

core/app/[locale]/store-selector/_components/locale-link.tsx

@@ -1,5 +1,5 @@
 import { Link } from '~/components/link';
-import { localeLanguageRegionMap, LocaleType } from '~/i18n/routing';
+import { localeLanguageRegionMap } from '~/i18n/routing';
 import { cn } from '~/lib/utils';
 
 export const LocaleLink = ({ locale, selected }: { locale: string; selected: boolean }) => {
@@ -16,8 +16,7 @@ export const LocaleLink = ({ locale, selected }: { locale: string; selected: boo
         selected && 'border-black',
       )}
       href="/"
-      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      locale={locale as LocaleType}
+      locale={locale}
     >
       <div className="flex h-full items-center gap-2">
         <div className="text-2xl">{selectedLocale.flag}</div>

core/app/[locale]/store-selector/page.tsx

@@ -5,7 +5,7 @@ import { graphql } from '~/client/graphql';
 import { Link } from '~/components/link';
 import { StoreLogo } from '~/components/store-logo';
 import { StoreLogoFragment } from '~/components/store-logo/fragment';
-import { locales, LocaleType } from '~/i18n/routing';
+import { locales } from '~/i18n/routing';
 
 import { LocaleLink } from './_components/locale-link';
 
@@ -31,7 +31,7 @@ export async function generateMetadata() {
 }
 
 interface Props {
-  params: Promise<{ locale: LocaleType }>;
+  params: Promise<{ locale: string }>;
 }
 
 export default async function StoreSelector({ params }: Props) {
@@ -61,7 +61,6 @@ export default async function StoreSelector({ params }: Props) {
 
         <div className="grid grid-cols-1 gap-6 py-6 md:grid-cols-3 md:gap-11 lg:grid-cols-4 lg:gap-8">
           {locales.map((locale) => (
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
             <LocaleLink key={locale} locale={locale} selected={selectedLocale === locale} />
           ))}
         </div>

core/build-config/reader.ts

@@ -0,0 +1,16 @@
+import rawBuildConfig from './build-config.json';
+import { buildConfigSchema, BuildConfigSchema } from './schema';
+
+class BuildConfig {
+  private config = buildConfigSchema.parse(rawBuildConfig);
+
+  get<K extends keyof BuildConfigSchema>(key: K): BuildConfigSchema[K] {
+    if (key in this.config) {
+      return this.config[key];
+    }
+
+    throw new Error(`Key "${key}" not found in BuildConfig`);
+  }
+}
+
+export const buildConfig = new BuildConfig();

core/build-config/schema.ts

@@ -0,0 +1,12 @@
+import { z } from 'zod';
+
+export const buildConfigSchema = z.object({
+  locales: z.array(
+    z.object({
+      code: z.string(),
+      isDefault: z.boolean(),
+    }),
+  ),
+});
+
+export type BuildConfigSchema = z.infer<typeof buildConfigSchema>;

core/build-config/writer.ts

@@ -0,0 +1,27 @@
+/* eslint-disable no-console */
+import { writeFile } from 'node:fs/promises';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { z } from 'zod';
+
+import { buildConfigSchema } from './schema';
+
+const destinationPath = dirname(fileURLToPath(import.meta.url));
+const CONFIG_FILE = join(destinationPath, 'build-config.json');
+
+// This fn is only intended to be used in the build process (next.config.ts)
+export async function writeBuildConfig(data: unknown) {
+  try {
+    buildConfigSchema.parse(data);
+
+    await writeFile(CONFIG_FILE, JSON.stringify(data), 'utf8');
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      console.error('Data validation failed:', error.errors);
+    } else {
+      console.error('Error writing build-config.json:', error);
+    }
+
+    throw error;
+  }
+}

core/channels.config.ts

@@ -1,17 +1,10 @@
-import { type LocaleType } from './i18n/routing';
-
-export type RecordFromLocales = {
-  [K in LocaleType]: string;
-};
-
 // Set overrides per locale
-const localeToChannelsMappings: Partial<RecordFromLocales> = {
+const localeToChannelsMappings: Record<string, string> = {
   // es: '12345',
 };
 
-function getChannelIdFromLocale(locale?: string) {
-  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-  return localeToChannelsMappings[locale as LocaleType] ?? process.env.BIGCOMMERCE_CHANNEL_ID;
+function getChannelIdFromLocale(locale = '') {
+  return localeToChannelsMappings[locale] ?? process.env.BIGCOMMERCE_CHANNEL_ID;
 }
 
 export { getChannelIdFromLocale };

core/client/index.ts

@@ -2,8 +2,7 @@ import { createClient } from '@bigcommerce/catalyst-client';
 import { headers } from 'next/headers';
 import { getLocale } from 'next-intl/server';
 
-import { getChannelIdFromLocale } from '~/channels.config';
-
+import { getChannelIdFromLocale } from '../channels.config';
 import { backendUserAgent } from '../userAgent';
 
 export const client = createClient({

core/components/ui/header/locale-switcher.tsx

@@ -5,7 +5,6 @@ import { useTranslations } from 'next-intl';
 import { useMemo, useState } from 'react';
 
 import { Link } from '~/components/link';
-import { LocaleType } from '~/i18n/routing';
 
 import { Button } from '../button';
 import { Select } from '../form';
@@ -19,7 +18,7 @@ type LanguagesByRegionMap = Record<
 >;
 
 interface Locale {
-  id: LocaleType;
+  id: string;
   region: string;
   language: string;
   flag: string;

core/i18n/request.ts

@@ -1,13 +1,12 @@
 import { notFound } from 'next/navigation';
 import { getRequestConfig } from 'next-intl/server';
 
-import { locales, LocaleType } from './routing';
+import { locales } from './routing';
 
 export default getRequestConfig(async ({ requestLocale }) => {
   const locale = await requestLocale;
 
-  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-  if (!locales.includes(locale as LocaleType)) {
+  if (!locale || !locales.includes(locale)) {
     notFound();
   }