chore: use setRequestLocale only where needed (#1884)

* chore: use setRequestLocale only where needed

* chore: add changeset

.changeset/popular-ducks-bake.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Use `setRequestLocale` only where needed

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

@@ -1,30 +1,19 @@
-import { getTranslations, setRequestLocale } from 'next-intl/server';
+import { getTranslations } from 'next-intl/server';
 
 import { ButtonLink } from '@/vibes/soul/primitives/button-link';
 import { SignInSection } from '@/vibes/soul/sections/sign-in-section';
 
 import { login } from './_actions/login';
 
-interface Props {
-  params: Promise<{ locale: string }>;
-}
-
-export async function generateMetadata({ params }: Props) {
-  const { locale } = await params;
+export async function generateMetadata() {
   const t = await getTranslations('Login');
 
-  setRequestLocale(locale);
-
   return {
     title: t('title'),
   };
 }
 
-export default async function Login({ params }: Props) {
-  const { locale } = await params;
-
-  setRequestLocale(locale);
-
+export default async function Login() {
   const t = await getTranslations('Login');
 
   return (

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

@@ -12,10 +12,11 @@ interface Props extends PropsWithChildren {
 export default async function Layout({ children, params }: Props) {
   const { locale } = await params;
   const session = await auth();
-  const t = await getTranslations('Account.Layout');
 
   setRequestLocale(locale);
 
+  const t = await getTranslations('Account.Layout');
+
   if (!session) {
     redirect({ href: '/login', locale });
   }

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

@@ -1,6 +1,6 @@
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
-import { getTranslations } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 
 import { Breadcrumb } from '@/vibes/soul/primitives/breadcrumbs';
 import { ButtonLink } from '@/vibes/soul/primitives/button-link';
@@ -13,7 +13,7 @@ import { submitContactForm } from './_actions/submit-contact-form';
 import { getWebpageData } from './page-data';
 
 interface Props {
-  params: Promise<{ id: string }>;
+  params: Promise<{ id: string; locale: string }>;
   searchParams: Promise<{ success?: string }>;
 }
 
@@ -155,8 +155,11 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 }
 
 export default async function ContactPage({ params, searchParams }: Props) {
-  const { id } = await params;
+  const { id, locale } = await params;
   const { success } = await searchParams;
+
+  setRequestLocale(locale);
+
   const t = await getTranslations('WebPages.ContactUs.Form');
 
   // TODO: Use reCaptcha

core/app/[locale]/layout.tsx

@@ -2,6 +2,7 @@ import { Analytics } from '@vercel/analytics/react';
 import { SpeedInsights } from '@vercel/speed-insights/next';
 import { clsx } from 'clsx';
 import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
 import { NextIntlClientProvider } from 'next-intl';
 import { getMessages, setRequestLocale } from 'next-intl/server';
 import { NuqsAdapter } from 'nuqs/adapters/next/app';
@@ -33,11 +34,7 @@ const RootLayoutMetadataQuery = graphql(`
   }
 `);
 
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const { locale } = await params;
-
-  setRequestLocale(locale);
-
+export async function generateMetadata(): Promise<Metadata> {
   const { data } = await client.fetch({
     document: RootLayoutMetadataQuery,
     fetchOptions: { next: { revalidate } },
@@ -84,6 +81,10 @@ interface Props extends PropsWithChildren {
 export default async function RootLayout({ params, children }: Props) {
   const { locale } = await params;
 
+  if (!routing.locales.includes(locale)) {
+    notFound();
+  }
+
   // need to call this method everywhere where static rendering is enabled
   // https://next-intl-docs.vercel.app/docs/getting-started/app-router#add-setRequestLocale-to-all-layouts-and-pages
   setRequestLocale(locale);

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

@@ -25,8 +25,14 @@ const MaintenancePageQuery = graphql(
   [StoreLogoFragment],
 );
 
-export async function generateMetadata() {
-  const t = await getTranslations('Maintenance');
+interface Props {
+  params: Promise<{ locale: string }>;
+}
+
+export async function generateMetadata({ params }: Props) {
+  const { locale } = await params;
+
+  const t = await getTranslations({ locale, namespace: 'Maintenance' });
 
   return {
     title: t('title'),
@@ -37,10 +43,6 @@ const Container = ({ children }: { children: ReactNode }) => (
   <main className="mx-auto flex h-screen flex-row items-center px-4 md:px-10">{children}</main>
 );
 
-interface Props {
-  params: Promise<{ locale: string }>;
-}
-
 export default async function Maintenance({ params }: Props) {
   const { locale } = await params;