chore(core): bump next-intl

Author: jorgemoya

.changeset/silent-rats-hear.md

@@ -0,0 +1,9 @@
+---
+"@bigcommerce/catalyst-core": minor
+---
+
+Bump `next-intl` which includes [some minor changes and updated APIs]((https://next-intl-docs.vercel.app/blog/next-intl-3-22)):
+
++ Use new `createNavigation` api.
++ Pass `locale` to redirects.
++ `setRequestLocale` is no longer unstable.

core/app/[locale]/(default)/(auth)/change-password/page.tsx

@@ -1,4 +1,4 @@
-import { useTranslations } from 'next-intl';
+import { useLocale, useTranslations } from 'next-intl';
 import { getTranslations } from 'next-intl/server';
 
 import { redirect } from '~/i18n/routing';
@@ -22,12 +22,13 @@ interface Props {
 
 export default function ChangePassword({ searchParams }: Props) {
   const t = useTranslations('ChangePassword');
+  const locale = useLocale();
 
   const customerId = searchParams.c;
   const customerToken = searchParams.t;
 
   if (!customerId || !customerToken) {
-    redirect('/login');
+    redirect({ href: '/login', locale });
   }
 
   if (customerId && customerToken) {

core/app/[locale]/(default)/(auth)/login/_actions/login.ts

@@ -1,12 +1,15 @@
 'use server';
 
 import { isRedirectError } from 'next/dist/client/components/redirect';
+import { getLocale } from 'next-intl/server';
 
 import { Credentials, signIn } from '~/auth';
 import { redirect } from '~/i18n/routing';
 
 export const login = async (_previousState: unknown, formData: FormData) => {
   try {
+    const locale = await getLocale();
+
     const credentials = Credentials.parse({
       email: formData.get('email'),
       password: formData.get('password'),
@@ -19,7 +22,7 @@ export const login = async (_previousState: unknown, formData: FormData) => {
       redirect: false,
     });
 
-    redirect('/account');
+    redirect({ href: '/account', locale });
   } catch (error: unknown) {
     // We need to throw this error to trigger the redirect as Next.js uses error boundaries to redirect.
     if (isRedirectError(error)) {

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

@@ -1,5 +1,5 @@
 import { useTranslations } from 'next-intl';
-import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 
 import { Link } from '~/components/link';
 import { Button } from '~/components/ui/button';
@@ -20,7 +20,7 @@ interface Props {
 }
 
 export default function Login({ params: { locale } }: Props) {
-  unstable_setRequestLocale(locale);
+  setRequestLocale(locale);
 
   const t = useTranslations('Login');
 

core/app/[locale]/(default)/(auth)/register/_actions/login.ts

@@ -1,11 +1,14 @@
 'use server';
 
 import { isRedirectError } from 'next/dist/client/components/redirect';
+import { getLocale } from 'next-intl/server';
 
 import { Credentials, signIn } from '~/auth';
 import { redirect } from '~/i18n/routing';
 
 export const login = async (formData: FormData) => {
+  const locale = await getLocale();
+
   try {
     const credentials = Credentials.parse({
       email: formData.get('customer-email'),
@@ -19,7 +22,7 @@ export const login = async (formData: FormData) => {
       redirect: false,
     });
 
-    redirect('/account');
+    redirect({ href: '/account', locale });
   } catch (error: unknown) {
     if (isRedirectError(error)) {
       throw error;

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

@@ -1,6 +1,6 @@
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
-import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 
 import { ProductCard } from '~/components/product-card';
 import { Pagination } from '~/components/ui/pagination';
@@ -40,7 +40,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 }
 
 export default async function Brand({ params: { slug, locale }, searchParams }: Props) {
-  unstable_setRequestLocale(locale);
+  setRequestLocale(locale);
 
   const t = await getTranslations('Brand');
 

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

@@ -1,6 +1,6 @@
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
-import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 
 import { Breadcrumbs } from '~/components/breadcrumbs';
 import { ProductCard } from '~/components/product-card';
@@ -48,7 +48,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 }
 
 export default async function Category({ params: { locale, slug }, searchParams }: Props) {
-  unstable_setRequestLocale(locale);
+  setRequestLocale(locale);
 
   const t = await getTranslations('Category');
 

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

@@ -1,5 +1,5 @@
 import { useTranslations } from 'next-intl';
-import { unstable_setRequestLocale } from 'next-intl/server';
+import { setRequestLocale } from 'next-intl/server';
 import { PropsWithChildren } from 'react';
 
 import { Link } from '~/components/link';
@@ -15,7 +15,7 @@ interface Props extends PropsWithChildren {
 }
 
 export default function AccountTabLayout({ children, params: { locale } }: Props) {
-  unstable_setRequestLocale(locale);
+  setRequestLocale(locale);
 
   const t = useTranslations('Account.Home');
 

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

@@ -1,4 +1,4 @@
-import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 
 import { locales, LocaleType } from '~/i18n/routing';
 
@@ -19,7 +19,7 @@ interface Props {
 }
 
 export default function ChangePassword({ params: { locale } }: Props) {
-  unstable_setRequestLocale(locale);
+  setRequestLocale(locale);
 
   return (
     <>

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

@@ -1,13 +1,15 @@
+import { getLocale } from 'next-intl/server';
 import { PropsWithChildren } from 'react';
 
 import { auth } from '~/auth';
 import { redirect } from '~/i18n/routing';
 
 export default async function AccountLayout({ children }: PropsWithChildren) {
+  const locale = await getLocale();
   const session = await auth();
 
   if (!session) {
-    redirect('/login');
+    redirect({ href: '/login', locale });
   }
 
   return children;

core/app/[locale]/(default)/cart/_actions/redirect-to-checkout.ts

@@ -1,5 +1,6 @@
 'use server';
 
+import { getLocale } from 'next-intl/server';
 import { z } from 'zod';
 
 import { getSessionCustomerId } from '~/auth';
@@ -20,6 +21,7 @@ const CheckoutRedirectMutation = graphql(`
 `);
 
 export const redirectToCheckout = async (formData: FormData) => {
+  const locale = await getLocale();
   const cartId = z.string().parse(formData.get('cartId'));
   const customerId = await getSessionCustomerId();
 
@@ -36,5 +38,5 @@ export const redirectToCheckout = async (formData: FormData) => {
     throw new Error('Invalid checkout url.');
   }
 
-  redirect(url);
+  redirect({ href: url, locale });
 };

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

@@ -1,4 +1,4 @@
-import { unstable_setRequestLocale } from 'next-intl/server';
+import { setRequestLocale } from 'next-intl/server';
 import { PropsWithChildren, Suspense } from 'react';
 
 import { Footer } from '~/components/footer/footer';
@@ -11,7 +11,7 @@ interface Props extends PropsWithChildren {
 }
 
 export default function DefaultLayout({ children, params: { locale } }: Props) {
-  unstable_setRequestLocale(locale);
+  setRequestLocale(locale);
 
   return (
     <>

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

@@ -1,5 +1,5 @@
 import { removeEdgesAndNodes } from '@bigcommerce/catalyst-client';
-import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 
 import { getSessionCustomerId } from '~/auth';
 import { client } from '~/client';
@@ -41,7 +41,7 @@ interface Props {
 }
 
 export default async function Home({ params: { locale } }: Props) {
-  unstable_setRequestLocale(locale);
+  setRequestLocale(locale);
 
   const t = await getTranslations('Home');
 

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

@@ -1,7 +1,7 @@
 import { removeEdgesAndNodes } from '@bigcommerce/catalyst-client';
 import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
-import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { Suspense } from 'react';
 
 import { Breadcrumbs } from '~/components/breadcrumbs';
@@ -69,7 +69,7 @@ export async function generateMetadata({ params, searchParams }: Props): Promise
 }
 
 export default async function Product({ params: { locale, slug }, searchParams }: Props) {
-  unstable_setRequestLocale(locale);
+  setRequestLocale(locale);
 
   const t = await getTranslations('Product');
 

core/app/[locale]/layout.tsx

@@ -3,7 +3,7 @@ import { SpeedInsights } from '@vercel/speed-insights/next';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import { NextIntlClientProvider, useMessages } from 'next-intl';
-import { unstable_setRequestLocale } from 'next-intl/server';
+import { setRequestLocale } from 'next-intl/server';
 import { PropsWithChildren } from 'react';
 
 import '../globals.css';
@@ -82,8 +82,8 @@ interface Props extends PropsWithChildren {
 
 export default function RootLayout({ children, params: { locale } }: Props) {
   // need to call this method everywhere where static rendering is enabled
-  // https://next-intl-docs.vercel.app/docs/getting-started/app-router#add-unstable_setrequestlocale-to-all-layouts-and-pages
-  unstable_setRequestLocale(locale);
+  // https://next-intl-docs.vercel.app/docs/getting-started/app-router#add-setRequestLocale-to-all-layouts-and-pages
+  setRequestLocale(locale);
 
   const messages = useMessages();
 

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

@@ -1,5 +1,5 @@
 import { Phone } from 'lucide-react';
-import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { ReactNode } from 'react';
 
 import { client } from '~/client';
@@ -42,7 +42,7 @@ interface Props {
 }
 
 export default async function Maintenance({ params: { locale } }: Props) {
-  unstable_setRequestLocale(locale);
+  setRequestLocale(locale);
 
   const t = await getTranslations('Maintenance');
 

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

@@ -1,4 +1,4 @@
-import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 
 import { client } from '~/client';
 import { graphql } from '~/client/graphql';
@@ -35,7 +35,7 @@ interface Props {
 }
 
 export default async function StoreSelector({ params: { locale: selectedLocale } }: Props) {
-  unstable_setRequestLocale(selectedLocale);
+  setRequestLocale(selectedLocale);
 
   const t = await getTranslations('StoreSelector');
 

core/app/admin/route.ts

@@ -1,20 +1,25 @@
+import { useLocale } from 'next-intl';
+
 import { redirect } from '~/i18n/routing';
 
 const canonicalDomain: string = process.env.BIGCOMMERCE_GRAPHQL_API_DOMAIN ?? 'mybigcommerce.com';
 const BIGCOMMERCE_STORE_HASH = process.env.BIGCOMMERCE_STORE_HASH;
 const ENABLE_ADMIN_ROUTE = process.env.ENABLE_ADMIN_ROUTE;
 
 export const GET = () => {
+  const locale = useLocale();
+
   // This route should not work unless explicitly enabled
   if (ENABLE_ADMIN_ROUTE !== 'true') {
-    return redirect('/');
+    return redirect({ href: '/', locale });
   }
 
-  return redirect(
-    BIGCOMMERCE_STORE_HASH
+  return redirect({
+    href: BIGCOMMERCE_STORE_HASH
       ? `https://store-${BIGCOMMERCE_STORE_HASH}.${canonicalDomain}/admin`
       : 'https://login.bigcommerce.com',
-  );
+    locale,
+  });
 };
 
 export const runtime = 'edge';

core/app/xmlsitemap.php/route.ts

@@ -1,4 +1,6 @@
 /* eslint-disable check-file/folder-naming-convention */
+import { useLocale } from 'next-intl';
+
 import { permanentRedirect } from '~/i18n/routing';
 
 /*
@@ -8,6 +10,10 @@ import { permanentRedirect } from '~/i18n/routing';
  * on /xmlsitemap.php
  */
 
-export const GET = () => permanentRedirect('/sitemap.xml');
+export const GET = () => {
+  const locale = useLocale();
+
+  permanentRedirect({ href: '/sitemap.xml', locale });
+};
 
 export const runtime = 'edge';

core/client/index.ts

@@ -23,7 +23,7 @@ export const client = createClient({
      * - Requests in middlewares
      * - Requests in `generateStaticParams`
      * - Request in api routes
-     * - Requests in static sites without `unstable_setRequestLocale`
+     * - Requests in static sites without `setRequestLocale`
      *
      * We use the default channelId as a fallback, but it is not ideal in some scenarios.
      *  */

core/components/header/_actions/logout.ts

@@ -1,10 +1,14 @@
 'use server';
 
+import { getLocale } from 'next-intl/server';
+
 import { signOut } from '~/auth';
 import { redirect } from '~/i18n/routing';
 
 export const logout = async () => {
+  const locale = await getLocale();
+
   await signOut({ redirect: false });
 
-  redirect('/login');
+  redirect({ href: '/login', locale });
 };