feat(core): localize metadata titles (#1368)

* feat(core): localize metadata titles

* fix: revert heading translations add address

.changeset/strong-penguins-rescue.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Localize metadata titles.

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

@@ -1,12 +1,17 @@
 import { useTranslations } from 'next-intl';
+import { getTranslations } from 'next-intl/server';
 
 import { redirect } from '~/i18n/routing';
 
 import { ChangePasswordForm } from './_components/change-password-form';
 
-export const metadata = {
-  title: 'Change password',
-};
+export async function generateMetadata() {
+  const t = await getTranslations('ChangePassword');
+
+  return {
+    title: t('title'),
+  };
+}
 
 interface Props {
   searchParams: {

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

@@ -1,15 +1,19 @@
 import { useTranslations } from 'next-intl';
-import { unstable_setRequestLocale } from 'next-intl/server';
+import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 
 import { Link } from '~/components/link';
 import { Button } from '~/components/ui/button';
 import { locales, LocaleType } from '~/i18n/routing';
 
 import { LoginForm } from './_components/login-form';
 
-export const metadata = {
-  title: 'Login',
-};
+export async function generateMetadata() {
+  const t = await getTranslations('Login');
+
+  return {
+    title: t('title'),
+  };
+}
 
 interface Props {
   params: { locale: LocaleType };

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

@@ -12,9 +12,13 @@ const FALLBACK_COUNTRY = {
   code: 'US',
 };
 
-export const metadata = {
-  title: 'Register account',
-};
+export async function generateMetadata() {
+  const t = await getTranslations('Register');
+
+  return {
+    title: t('title'),
+  };
+}
 
 export default async function Register() {
   const t = await getTranslations('Register');

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

@@ -23,9 +23,13 @@ const ResetPageQuery = graphql(
   [ResetPasswordFormFragment],
 );
 
-export const metadata = {
-  title: 'Reset password',
-};
+export async function generateMetadata() {
+  const t = await getTranslations('Reset');
+
+  return {
+    title: t('title'),
+  };
+}
 
 export default async function Reset() {
   const t = await getTranslations('Reset');

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

@@ -9,9 +9,13 @@ import { MobileSideNav } from '../_components/mobile-side-nav';
 import { SortBy } from '../_components/sort-by';
 import { fetchFacetedSearch } from '../fetch-faceted-search';
 
-export const metadata = {
-  title: 'Search Results',
-};
+export async function generateMetadata() {
+  const t = await getTranslations('Search');
+
+  return {
+    title: t('title'),
+  };
+}
 
 interface Props {
   searchParams: Record<string, string | string[] | undefined>;

core/app/[locale]/(default)/account/(tabs)/addresses/add/page.tsx

@@ -59,9 +59,13 @@ const FALLBACK_COUNTRY = {
   states: [],
 };
 
-export const metadata = {
-  title: 'Add address',
-};
+export async function generateMetadata() {
+  const t = await getTranslations('Account.Addresses.Add');
+
+  return {
+    title: t('title'),
+  };
+}
 
 export default async function AddPage() {
   const t = await getTranslations('Account.Addresses.Add');

core/app/[locale]/(default)/account/(tabs)/addresses/edit/[slug]/page.tsx

@@ -89,9 +89,13 @@ const CustomerEditAddressQuery = graphql(
 
 export type CustomerEditAddressQueryResult = ResultOf<typeof CustomerEditAddressQuery>;
 
-export const metadata = {
-  title: 'Edit address',
-};
+export async function generateMetadata() {
+  const t = await getTranslations('Account.Addresses.Edit');
+
+  return {
+    title: t('title'),
+  };
+}
 
 interface Props {
   params: { slug: string };

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

@@ -1,4 +1,5 @@
 import { notFound } from 'next/navigation';
+import { getTranslations } from 'next-intl/server';
 
 import { Pagination } from '~/components/ui/pagination';
 
@@ -15,9 +16,13 @@ interface Props {
   };
 }
 
-export const metadata = {
-  title: 'Addresses',
-};
+export async function generateMetadata() {
+  const t = await getTranslations('Account.Addresses');
+
+  return {
+    title: t('title'),
+  };
+}
 
 export default async function Addresses({ searchParams }: Props) {
   const { before, after } = searchParams;

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

@@ -1,14 +1,18 @@
-import { unstable_setRequestLocale } from 'next-intl/server';
+import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 
 import { locales, LocaleType } from '~/i18n/routing';
 
 import { TabHeading } from '../../_components/tab-heading';
 
 import { ChangePasswordForm } from './_components/change-password-form';
 
-export const metadata = {
-  title: 'Change password',
-};
+export async function generateMetadata() {
+  const t = await getTranslations('Account.Settings.ChangePassword');
+
+  return {
+    title: t('title'),
+  };
+}
 
 interface Props {
   params: { locale: LocaleType };

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

@@ -1,10 +1,19 @@
 import { notFound } from 'next/navigation';
+import { getTranslations } from 'next-intl/server';
 
 import { TabHeading } from '../_components/tab-heading';
 
 import { UpdateSettingsForm } from './_components/update-settings-form';
 import { getCustomerSettingsQuery } from './page-data';
 
+export async function generateMetadata() {
+  const t = await getTranslations('Account.Settings');
+
+  return {
+    title: t('title'),
+  };
+}
+
 export default async function Settings() {
   const customerSettings = await getCustomerSettingsQuery({
     address: { filters: { entityIds: [4, 5, 6, 7] } },

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

@@ -1,5 +1,6 @@
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
+import { getTranslations } from 'next-intl/server';
 
 import { BlogPostCard } from '~/components/blog-post-card';
 import { Pagination } from '~/components/ui/pagination';
@@ -13,10 +14,11 @@ interface Props {
 }
 
 export async function generateMetadata({ searchParams }: Props): Promise<Metadata> {
+  const t = await getTranslations('Blog');
   const blogPosts = await getBlogPosts(searchParams);
 
   return {
-    title: blogPosts?.name ?? 'Blog',
+    title: blogPosts?.name ?? t('title'),
     description:
       blogPosts?.description && blogPosts.description.length > 150
         ? `${blogPosts.description.substring(0, 150)}...`

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

@@ -36,9 +36,13 @@ const CartPageQuery = graphql(
   [CartItemFragment, CheckoutSummaryFragment, GeographyFragment],
 );
 
-export const metadata = {
-  title: 'Cart',
-};
+export async function generateMetadata() {
+  const t = await getTranslations('Cart');
+
+  return {
+    title: t('title'),
+  };
+}
 
 export default async function Cart() {
   const cartId = cookies().get('cartId')?.value;

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

@@ -81,9 +81,13 @@ const ComparePageQuery = graphql(
   [AddToCartFragment, PricingFragment],
 );
 
-export const metadata = {
-  title: 'Compare',
-};
+export async function generateMetadata() {
+  const t = await getTranslations('Compare');
+
+  return {
+    title: t('title'),
+  };
+}
 
 interface Props {
   searchParams: Record<string, string | string[] | undefined>;

core/app/[locale]/error.tsx

@@ -2,8 +2,4 @@
 
 import { lazy } from 'react';
 
-export const metadata = {
-  title: 'Error',
-};
-
 export default lazy(() => import('./_components/error'));

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

@@ -25,9 +25,13 @@ const MaintenancePageQuery = graphql(
   [StoreLogoFragment],
 );
 
-export const metadata = {
-  title: 'Maintenance',
-};
+export async function generateMetadata() {
+  const t = await getTranslations('Maintenance');
+
+  return {
+    title: t('title'),
+  };
+}
 
 const Container = ({ children }: { children: ReactNode }) => (
   <main className="mx-auto mt-[64px] px-4 md:px-10 lg:mt-[128px]">{children}</main>

core/app/[locale]/not-found.tsx

@@ -33,10 +33,6 @@ const NotFoundQuery = graphql(
   [HeaderFragment, FooterFragment, ProductCardFragment],
 );
 
-export const metadata = {
-  title: 'Not Found',
-};
-
 export default async function NotFound() {
   const t = await getTranslations('NotFound');
 

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

@@ -22,9 +22,13 @@ const StoreSelectorPageQuery = graphql(
   [StoreLogoFragment],
 );
 
-export const metadata = {
-  title: 'Location selector',
-};
+export async function generateMetadata() {
+  const t = await getTranslations('StoreSelector');
+
+  return {
+    title: t('title'),
+  };
+}
 
 interface Props {
   params: { locale: LocaleType };