refactor(core): split i18n messages from middleware (bigcommerce#1333)

.changeset/hip-zoos-confess.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Splits i18n into request.ts and routing.ts This helps reduce our middleware bundle as we no longer do a dynamic import on our middleware entrypoint.

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

@@ -4,7 +4,7 @@ import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 
 import { ProductCard } from '~/components/product-card';
 import { Pagination } from '~/components/ui/pagination';
-import { LocaleType } from '~/i18n';
+import { LocaleType } from '~/i18n/routing';
 
 import { FacetedSearch } from '../../_components/faceted-search';
 import { MobileSideNav } from '../../_components/mobile-side-nav';

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

@@ -5,7 +5,7 @@ import { getChannelIdFromLocale } from '~/channels.config';
 import { client } from '~/client';
 import { graphql, VariablesOf } from '~/client/graphql';
 import { revalidate as revalidateTarget } from '~/client/revalidate-target';
-import { locales } from '~/i18n';
+import { locales } from '~/i18n/routing';
 
 import BrandPage from '../page';
 

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

@@ -5,7 +5,7 @@ import { getTranslations, unstable_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';
+import { LocaleType } from '~/i18n/routing';
 
 import { FacetedSearch } from '../../_components/faceted-search';
 import { MobileSideNav } from '../../_components/mobile-side-nav';

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

@@ -5,7 +5,7 @@ import { client } from '~/client';
 import { graphql, VariablesOf } from '~/client/graphql';
 import { revalidate as revalidateTarget } from '~/client/revalidate-target';
 import { ExistingResultType } from '~/client/util';
-import { locales } from '~/i18n';
+import { locales } from '~/i18n/routing';
 
 import { CategoryTreeFragment } from '../_components/sub-categories';
 import CategoryPage from '../page';

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

@@ -3,7 +3,7 @@ import { unstable_setRequestLocale } from 'next-intl/server';
 import { PropsWithChildren } from 'react';
 
 import { Link } from '~/components/link';
-import { LocaleType } from '~/i18n';
+import { LocaleType } from '~/i18n/routing';
 import { cn } from '~/lib/utils';
 
 const tabList = ['addresses', 'settings'] as const;

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

@@ -18,7 +18,7 @@ import {
   Input,
 } from '~/components/ui/form';
 import { Message } from '~/components/ui/message';
-import { useRouter } from '~/routing';
+import { useRouter } from '~/i18n/routing';
 
 import { submitCustomerChangePasswordForm } from '../_actions/submit-customer-change-password-form';
 

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

@@ -3,7 +3,7 @@ import { notFound } from 'next/navigation';
 
 import { BlogPostCard } from '~/components/blog-post-card';
 import { Pagination } from '~/components/ui/pagination';
-import { LocaleType } from '~/i18n';
+import { LocaleType } from '~/i18n/routing';
 
 import { getBlogPosts } from './page-data';
 

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

@@ -10,7 +10,7 @@ import { FooterFragment } from '~/components/footer/fragment';
 import { Header } from '~/components/header';
 import { Cart } from '~/components/header/cart';
 import { HeaderFragment } from '~/components/header/fragment';
-import { LocaleType } from '~/i18n';
+import { LocaleType } from '~/i18n/routing';
 
 interface Props extends PropsWithChildren {
   params: { locale: LocaleType };

core/app/[locale]/(default)/login/_components/change-password-form.tsx

@@ -15,7 +15,7 @@ import {
   Input,
 } from '~/components/ui/form';
 import { Message } from '~/components/ui/message';
-import { useRouter } from '~/routing';
+import { useRouter } from '~/i18n/routing';
 
 import { useAccountStatusContext } from '../../account/(tabs)/_components/account-status-provider';
 import { submitChangePasswordForm } from '../_actions/submit-change-password-form';

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

@@ -8,7 +8,7 @@ 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';
+import { LocaleType } from '~/i18n/routing';
 
 const HomePageQuery = graphql(
   `

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

@@ -5,7 +5,7 @@ import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 import { Suspense } from 'react';
 
 import { Breadcrumbs } from '~/components/breadcrumbs';
-import { LocaleType } from '~/i18n';
+import { LocaleType } from '~/i18n/routing';
 
 import { Description } from './_components/description';
 import { Details } from './_components/details';

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

@@ -6,7 +6,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 } from '~/i18n';
+import { locales } from '~/i18n/routing';
 
 import ProductPage from '../page';
 

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

@@ -1,4 +1,4 @@
-import { locales } from '~/i18n';
+import { locales } from '~/i18n/routing';
 
 import HomePage from '../page';
 

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

@@ -6,7 +6,7 @@ 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';
+import { LocaleType } from '~/i18n/routing';
 
 const MaintenancePageQuery = graphql(
   `

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

@@ -1,5 +1,5 @@
 import { Link } from '~/components/link';
-import { localeLanguageRegionMap, LocaleType } from '~/i18n';
+import { localeLanguageRegionMap, LocaleType } from '~/i18n/routing';
 import { cn } from '~/lib/utils';
 
 export const LocaleLink = ({ locale, selected }: { locale: string; selected: boolean }) => {

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';
+import { locales, LocaleType } from '~/i18n/routing';
 
 import { LocaleLink } from './_components/locale-link';
 

core/channels.config.ts

@@ -1,4 +1,4 @@
-import { type LocaleType } from './i18n';
+import { type LocaleType } from './i18n/routing';
 
 export type RecordFromLocales = {
   [K in LocaleType]: string;

core/components/header/index.tsx

@@ -5,7 +5,7 @@ import { ReactNode, Suspense } from 'react';
 import { getSessionCustomerId } from '~/auth';
 import { FragmentOf } from '~/client/graphql';
 import { logoTransformer } from '~/data-transformers/logo-transformer';
-import { localeLanguageRegionMap } from '~/i18n';
+import { localeLanguageRegionMap } from '~/i18n/routing';
 
 import { Link } from '../link';
 import { Button } from '../ui/button';

core/components/link/index.tsx

@@ -4,7 +4,7 @@ import { ComponentPropsWithRef, ElementRef, forwardRef, useReducer } from 'react
 
 import { cn } from '~/lib/utils';
 
-import { Link as NavLink, useRouter } from '../../routing';
+import { Link as NavLink, useRouter } from '../../i18n/routing';
 
 type NextLinkProps = Omit<ComponentPropsWithRef<typeof NavLink>, 'prefetch'>;
 

core/components/ui/compare-drawer/compare-drawer.tsx

@@ -4,7 +4,7 @@ import { useTranslations } from 'next-intl';
 
 import { BcImage } from '~/components/bc-image';
 import { Link as CustomLink } from '~/components/link';
-import { usePathname } from '~/routing';
+import { usePathname } from '~/i18n/routing';
 
 import { Button } from '../button';
 

core/components/ui/footer/locale.tsx

@@ -1,6 +1,6 @@
 import { getLocale } from 'next-intl/server';
 
-import { localeLanguageRegionMap, locales } from '~/i18n';
+import { localeLanguageRegionMap, locales } from '~/i18n/routing';
 
 import { Link as CustomLink } from '../../link';
 

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

@@ -2,10 +2,9 @@
 
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { useTranslations } from 'next-intl';
-import { useMemo, useState } from 'react';
+import { FormEvent, useMemo, useState } from 'react';
 
-import { LocaleType } from '~/i18n';
-import { useRouter } from '~/routing';
+import { LocaleType, useRouter } from '~/i18n/routing';
 
 import { Button } from '../button';
 import { Select } from '../form';
@@ -78,7 +77,9 @@ const LocaleSwitcher = ({ activeLocale, locales }: Props) => {
     }
   };
 
-  const handleOnSubmit = () => {
+  const handleOnSubmit = (event: FormEvent) => {
+    event.preventDefault();
+
     const newLocale = locales.find(
       (locale) => locale.language === languageSelected && locale.region === regionSelected,
     );

core/i18n/request.ts

@@ -0,0 +1,16 @@
+import { notFound } from 'next/navigation';
+import { getRequestConfig } from 'next-intl/server';
+
+import { locales, LocaleType } from './routing';
+
+export default getRequestConfig(async ({ locale }) => {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  if (!locales.includes(locale as LocaleType)) {
+    notFound();
+  }
+
+  return {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+    messages: (await import(`../messages/${locale}.json`)).default,
+  };
+});

core/i18n.ts → core/i18n/routing.ts

@@ -1,15 +1,9 @@
-import { notFound } from 'next/navigation';
-import { getRequestConfig } from 'next-intl/server';
-
-enum LocalePrefixes {
-  ALWAYS = 'always',
-  NEVER = 'never',
-  ASNEEDED = 'as-needed', // removes prefix on default locale
-}
+import { createSharedPathnamesNavigation } from 'next-intl/navigation';
+import { defineRouting, LocalePrefix } from 'next-intl/routing';
 
 // Enable locales by including them here.
 // List includes locales with existing messages support.
-const locales = [
+export const locales = [
   'en',
   // 'da',
   // 'es-419',
@@ -32,6 +26,8 @@ const locales = [
   // 'sv',
 ] as const;
 
+export type LocaleType = (typeof locales)[number];
+
 interface LocaleEntry {
   id: LocaleType;
   language: string;
@@ -66,25 +62,26 @@ export const localeLanguageRegionMap: LocaleEntry[] = [
   // { id: 'sv', language: 'Svenska', region: 'Sverige', flag: '🇸🇪' },
 ];
 
-type LocalePrefixesType = `${LocalePrefixes}`;
+enum LocalePrefixes {
+  ALWAYS = 'always',
+  NEVER = 'never',
+  ASNEEDED = 'as-needed', // removes prefix on default locale
+}
 
 // Temporary we use NEVER prefix to prioritize accept-language header
 // & disable internationalized routes due to incomplete multilingual implementation
-const localePrefix: LocalePrefixesType = LocalePrefixes.NEVER;
-const defaultLocale = 'en';
-
-type LocaleType = (typeof locales)[number];
-
-export default getRequestConfig(async (params) => {
-  let lang = params.locale as LocaleType; // eslint-disable-line
+export const localePrefix: LocalePrefix = LocalePrefixes.NEVER;
 
-  if (!locales.includes(lang)) notFound();
+export const defaultLocale = 'en';
 
-  return {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
-    messages: (await import(`./messages/${lang}`)).default,
-  };
+export const routing = defineRouting({
+  locales,
+  defaultLocale,
+  localePrefix: {
+    mode: localePrefix,
+  },
 });
 
-export { LocalePrefixes, locales, localePrefix, defaultLocale };
-export type { LocaleType };
+// Lightweight wrappers around Next.js' navigation APIs
+// that will consider the routing configuration
+export const { Link, redirect, usePathname, useRouter } = createSharedPathnamesNavigation(routing);

core/middlewares/with-intl.ts

@@ -1,6 +1,6 @@
 import createMiddleware from 'next-intl/middleware';
 
-import { routing } from '~/routing';
+import { routing } from '~/i18n/routing';
 
 import { type MiddlewareFactory } from './compose-middlewares';
 

core/package.json

@@ -43,7 +43,7 @@
     "lucide-react": "^0.436.0",
     "next": "14.2.6",
     "next-auth": "5.0.0-beta.20",
-    "next-intl": "^3.18.1",
+    "next-intl": "^3.19.0",
     "react": "^18.3.1",
     "react-day-picker": "^8.10.0",
     "react-dom": "^18.3.1",

integrations/makeswift/integration.patch

@@ -21,7 +21,7 @@ index 71d40507..9179455c 100644
 
 -export default function CatchAllPage() {
 -  notFound();
-+import { locales } from '~/i18n';
++import { locales } from '~/i18n/routing';
 +import { client } from '~/lib/makeswift/client';
 +import { MakeswiftProvider } from '~/lib/makeswift/provider';
 +

integrations/strapi-rest/integration.patch

@@ -105,7 +105,7 @@ index 3edd5ac4..4b7c2c40 100644
 
  import { BcImage } from '~/components/bc-image';
  import { Link } from '~/components/link';
-@@ -9,35 +10,32 @@ import { LocaleType } from '~/i18n';
+@@ -9,35 +10,32 @@ import { LocaleType } from '~/i18n/routing';
 
  import { SharingLinks } from './_components/sharing-links';
  import { getBlogPageData } from './page-data';
@@ -261,7 +261,7 @@ index 00000000..6d2a5579
 +import { BlocksRenderer, type BlocksContent } from '@strapi/blocks-react-renderer';
 +import { unstable_setRequestLocale } from 'next-intl/server';
 +import { Link } from '~/components/link';
-+import { LocaleType } from '~/i18n';
++import { LocaleType } from '~/i18n/routing';
 +import { fetchStrapiData } from '~/lib/strapi/data-fetcher';
 +
 +interface Props {
@@ -352,7 +352,7 @@ index 00000000..54a634d2
 @@ -0,0 +1,71 @@
 +import { unstable_setRequestLocale } from 'next-intl/server';
 +import { Link } from '~/components/link';
-+import { LocaleType } from '~/i18n';
++import { LocaleType } from '~/i18n/routing';
 +import { fetchStrapiData } from '~/lib/strapi/data-fetcher';
 +
 +interface Props {