refactor(app): update pages with i18n restructuring and metadata improvements

Update all app pages to use the new i18n namespace structure and improve metadata handling with request memoization.

Changes:
- Update all pages to use new namespaced i18n translations
- Implement React cache() for data fetchers to prevent duplicate fetching in generateMetadata() and page components
- Update metadata generation to use auto-detected OG images
- Improve type safety with proper Locale type imports
- Update all page.tsx, page.client.tsx files across:
  - CLIs, Extensions, IDEs (list + detail + comparison pages)
  - Models, Providers, Vendors (list + detail pages)
  - Articles, Docs, Search, Home, and other pages
- Update globals.css with minimalist design improvements
- Update layout.tsx with new i18n structure

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: ericyangpan

src/app/[locale]/ai-coding-landscape/page.tsx

@@ -9,7 +9,7 @@ import VendorMatrix from './components/VendorMatrix'
 
 export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }) {
   const { locale } = await params
-  const tNav = await getTranslations({ locale, namespace: 'header' })
+  const tNav = await getTranslations({ locale, namespace: 'components.header' })
 
   const canonicalPath = locale === 'en' ? '/ai-coding-landscape' : `/${locale}/ai-coding-landscape`
   const title = buildTitle({ title: tNav('aiCodingLandscape') })
@@ -47,8 +47,8 @@ type Props = {
 
 export default async function Page({ params }: Props) {
   const { locale } = await params
-  const tNav = await getTranslations({ locale, namespace: 'header' })
-  const tOverview = await getTranslations({ locale, namespace: 'stacksPages.overview' })
+  const tNav = await getTranslations({ locale, namespace: 'components.header' })
+  const tOverview = await getTranslations({ locale, namespace: 'pages.overview' })
 
   // Build vendor matrix data
   const matrixData = buildVendorMatrix()

src/app/[locale]/ai-coding-stack/page.tsx

@@ -7,7 +7,7 @@ import { buildCanonicalUrl, buildOpenGraph, buildTitle, buildTwitterCard } from
 
 export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }) {
   const { locale } = await params
-  const t = await getTranslations({ locale, namespace: 'stacksPages.overview' })
+  const t = await getTranslations({ locale, namespace: 'pages.overview' })
 
   const canonicalPath = locale === 'en' ? '/ai-coding-stack' : `/${locale}/ai-coding-stack`
   const title = buildTitle({ title: t('title') })
@@ -45,7 +45,7 @@ type Props = {
 
 export default async function AICodingStackPage({ params }: Props) {
   const { locale } = await params
-  const t = await getTranslations({ locale, namespace: 'stacksPages.overview' })
+  const t = await getTranslations({ locale, namespace: 'pages.overview' })
 
   return (
     <>

src/app/[locale]/articles/[slug]/page.tsx

@@ -3,8 +3,10 @@ import { getTranslations } from 'next-intl/server'
 import { Breadcrumb } from '@/components/controls/Breadcrumb'
 import Footer from '@/components/Footer'
 import Header from '@/components/Header'
+import type { Locale } from '@/i18n/config'
 import { Link } from '@/i18n/navigation'
-import { getArticleBySlug, getArticleComponent, getArticles } from '@/lib/generated/articles'
+import { getArticle } from '@/lib/data/fetchers'
+import { getArticleComponent, getArticles } from '@/lib/generated/articles'
 import { generateArticleMetadata } from '@/lib/metadata'
 
 type Props = {
@@ -30,14 +32,14 @@ export async function generateStaticParams() {
 
 export async function generateMetadata({ params }: Props) {
   const { slug, locale } = await params
-  const article = getArticleBySlug(slug, locale)
+  const article = await getArticle(slug, locale)
 
   if (!article) {
     return { title: 'Article Not Found | AI Coding Stack' }
   }
 
   return await generateArticleMetadata({
-    locale: locale as 'en' | 'zh-Hans',
+    locale: locale as Locale,
     slug,
     article: {
       title: article.title,
@@ -49,13 +51,13 @@ export async function generateMetadata({ params }: Props) {
 
 export default async function ArticlePage({ params }: Props) {
   const { slug, locale } = await params
-  const article = getArticleBySlug(slug, locale)
+  const article = await getArticle(slug, locale)
 
   if (!article) {
     notFound()
   }
 
-  const t = await getTranslations({ locale, namespace: 'header' })
+  const t = await getTranslations({ locale, namespace: 'components.header' })
   const ArticleContent = await getArticleComponent(locale, slug)
 
   if (!ArticleContent) {
@@ -94,7 +96,7 @@ export default async function ArticlePage({ params }: Props) {
       />
 
       {/* Article Content */}
-      <article className="max-w-5xl mx-auto px-[var(--spacing-md)] py-[var(--spacing-xl)]">
+      <article className="max-w-6xl mx-auto px-[var(--spacing-md)] py-[var(--spacing-xl)]">
         {/* Article Header */}
         <header className="mb-[var(--spacing-xl)]">
           <h1 className="text-4xl font-semibold tracking-[-0.03em] mb-[var(--spacing-sm)] leading-tight">

src/app/[locale]/clis/[slug]/page.tsx

@@ -8,16 +8,15 @@ import { JsonLd } from '@/components/JsonLd'
 import { ProductCommands, ProductHero, ProductLinks, ProductPricing } from '@/components/product'
 import type { Locale } from '@/i18n/config'
 import { Link } from '@/i18n/navigation'
+import { getCLI } from '@/lib/data/fetchers'
 import { clisData as clis } from '@/lib/generated'
 import { getGithubStars } from '@/lib/generated/github-stars'
 import { translateLicenseText } from '@/lib/license'
-import { localizeManifestItem } from '@/lib/manifest-i18n'
 import { generateSoftwareDetailMetadata } from '@/lib/metadata'
 import { getSchemaCurrency, getSchemaPrice } from '@/lib/pricing'
 import type {
   ComponentCommunityUrls,
   ComponentResourceUrls,
-  ManifestCLI,
   ManifestPricingTier,
 } from '@/types/manifests'
 
@@ -35,22 +34,17 @@ export async function generateMetadata({
   params: Promise<{ locale: string; slug: string }>
 }) {
   const { locale, slug } = await params
-  const cliRaw = clis.find(c => c.id === slug)
+  const cli = await getCLI(slug, locale as Locale)
 
-  if (!cliRaw) {
+  if (!cli) {
     return { title: 'CLI Not Found | AI Coding Stack' }
   }
 
-  const cli = localizeManifestItem(
-    cliRaw as unknown as Record<string, unknown>,
-    locale as Locale
-  ) as unknown as ManifestCLI
-  const t = await getTranslations({ locale })
-
-  const licenseStr = cli.license ? translateLicenseText(cli.license, t) : ''
+  const tGlobal = await getTranslations({ locale })
+  const licenseStr = cli.license ? translateLicenseText(cli.license, tGlobal) : ''
 
   return await generateSoftwareDetailMetadata({
-    locale: locale as 'en' | 'zh-Hans',
+    locale: locale as Locale,
     category: 'clis',
     slug,
     product: {
@@ -71,20 +65,14 @@ export default async function CLIPage({
   params: Promise<{ locale: string; slug: string }>
 }) {
   const { locale, slug } = await params
-  const cliRaw = clis.find(c => c.id === slug) as ManifestCLI | undefined
+  const cli = await getCLI(slug, locale as Locale)
 
-  if (!cliRaw) {
+  if (!cli) {
     notFound()
   }
 
-  const cli = localizeManifestItem(
-    cliRaw as unknown as Record<string, unknown>,
-    locale as Locale
-  ) as unknown as ManifestCLI
-  const t = await getTranslations({ locale })
-  const tHero = await getTranslations({ locale, namespace: 'components.productHero' })
-  const tNav = await getTranslations({ locale, namespace: 'stacksPages.clis' })
-  const tStacks = await getTranslations({ locale, namespace: 'stacks' })
+  const t = await getTranslations({ locale, namespace: 'pages.cliDetail' })
+  const tGlobal = await getTranslations({ locale })
 
   const websiteUrl = cli.resourceUrls?.download || cli.websiteUrl
   const docsUrl = cli.docsUrl
@@ -135,7 +123,7 @@ export default async function CLIPage({
           }
         })
       : undefined,
-    license: cli.license ? translateLicenseText(cli.license, t) : undefined,
+    license: cli.license ? translateLicenseText(cli.license, tGlobal) : undefined,
   }
 
   return (
@@ -145,8 +133,8 @@ export default async function CLIPage({
 
       <Breadcrumb
         items={[
-          { name: tStacks('aiCodingStack'), href: '/ai-coding-stack' },
-          { name: tStacks('clis'), href: 'clis' },
+          { name: tGlobal('shared.common.aiCodingStack'), href: '/ai-coding-stack' },
+          { name: tGlobal('shared.stacks.clis'), href: 'clis' },
           { name: cli.name, href: `clis/${cli.id}` },
         ]}
       />
@@ -157,7 +145,7 @@ export default async function CLIPage({
         description={cli.description}
         vendor={cli.vendor}
         category="CLI"
-        categoryLabel={tHero('categories.CLI')}
+        categoryLabel={t('categoryLabel')}
         latestVersion={cli.latestVersion}
         license={cli.license}
         githubStars={getGithubStars('clis', cli.id)}
@@ -166,14 +154,14 @@ export default async function CLIPage({
         docsUrl={docsUrl}
         downloadUrl={cli.resourceUrls?.download || undefined}
         labels={{
-          vendor: tHero('vendor'),
-          version: tHero('version'),
-          license: tHero('license'),
-          stars: tHero('stars'),
-          platforms: tHero('platforms'),
-          visitWebsite: tHero('visitWebsite'),
-          documentation: tHero('documentation'),
-          download: tHero('download'),
+          vendor: t('vendor'),
+          version: t('version'),
+          license: t('license'),
+          stars: t('stars'),
+          platforms: t('platforms'),
+          visitWebsite: t('visitWebsite'),
+          documentation: t('documentation'),
+          download: t('download'),
         }}
       />
 
@@ -226,7 +214,7 @@ export default async function CLIPage({
       <ProductCommands install={cli.install} launch={cli.launch} />
 
       {/* Navigation */}
-      <BackToNavigation href="clis" title={tNav('allCLIs')} />
+      <BackToNavigation href="clis" title={t('allCLIs')} />
 
       <Footer />
     </>

src/app/[locale]/clis/comparison/page.client.tsx

@@ -18,28 +18,28 @@ type Props = {
 }
 
 export default function CLIComparisonPageClient({ locale }: Props) {
-  const tComparison = useTranslations('comparison')
-  const tStacks = useTranslations('stacks')
-  const tCommunity = useTranslations('community')
-  const t = useTranslations()
+  const t = useTranslations('pages.comparison')
+  const tCommunity = useTranslations('shared.platforms')
+  const tGlobal = useTranslations()
 
   const columns: ComparisonColumn[] = [
     {
       key: 'vendor',
-      label: tComparison('columns.vendor'),
+      label: t('columns.vendor'),
     },
     {
       key: 'license',
-      label: tComparison('columns.license'),
-      render: (value: unknown, item: Record<string, unknown>) => renderLicense(value, item, t),
+      label: t('columns.license'),
+      render: (value: unknown, item: Record<string, unknown>) =>
+        renderLicense(value, item, tGlobal),
     },
     {
       key: 'latestVersion',
-      label: tComparison('columns.version'),
+      label: t('columns.version'),
     },
     {
       key: 'platforms',
-      label: tComparison('columns.platforms'),
+      label: t('columns.platforms'),
       render: (value: unknown) => {
         const platforms = value as Array<{ os: string }> | string[]
         if (!platforms || platforms.length === 0) return '-'
@@ -72,7 +72,7 @@ export default function CLIComparisonPageClient({ locale }: Props) {
     },
     {
       key: 'githubStars',
-      label: tComparison('columns.githubStars'),
+      label: t('columns.githubStars'),
       render: (_: unknown, item: Record<string, unknown>) => {
         const id = item.id as string
         const stars = getGithubStars('clis', id)
@@ -106,7 +106,7 @@ export default function CLIComparisonPageClient({ locale }: Props) {
     },
     {
       key: 'links',
-      label: tComparison('columns.links'),
+      label: t('columns.links'),
       render: (_: unknown, item: Record<string, unknown>) => {
         const websiteUrl = item.websiteUrl as string | undefined
         const docsUrl = item.docsUrl as string | undefined
@@ -133,7 +133,7 @@ export default function CLIComparisonPageClient({ locale }: Props) {
                 target="_blank"
                 rel="noopener"
                 className="text-[var(--color-text)] hover:text-[var(--color-text-secondary)] transition-colors"
-                title={tComparison('linkTitles.officialWebsite')}
+                title={t('linkTitles.officialWebsite')}
               >
                 <Home className="w-3.5 h-3.5" />
               </a>
@@ -148,7 +148,7 @@ export default function CLIComparisonPageClient({ locale }: Props) {
                 target="_blank"
                 rel="noopener"
                 className="text-[var(--color-text)] hover:text-[var(--color-text-secondary)] transition-colors"
-                title={tComparison('linkTitles.download')}
+                title={t('linkTitles.download')}
               >
                 <Download className="w-3.5 h-3.5" />
               </a>
@@ -163,7 +163,7 @@ export default function CLIComparisonPageClient({ locale }: Props) {
                 target="_blank"
                 rel="noopener"
                 className="text-[var(--color-text)] hover:text-[var(--color-text-secondary)] transition-colors"
-                title={tComparison('linkTitles.documentation')}
+                title={t('linkTitles.documentation')}
               >
                 <FileText className="w-3.5 h-3.5" />
               </a>
@@ -238,7 +238,7 @@ export default function CLIComparisonPageClient({ locale }: Props) {
     },
     {
       key: 'pricing-free',
-      label: tComparison('columns.freePlan'),
+      label: t('columns.freePlan'),
       render: (_: unknown, item: Record<string, unknown>) => {
         const pricing = item.pricing as PricingTier[]
         if (!pricing || pricing.length === 0) return '-'
@@ -248,20 +248,20 @@ export default function CLIComparisonPageClient({ locale }: Props) {
     },
     {
       key: 'pricing-min',
-      label: tComparison('columns.startingPrice'),
+      label: t('columns.startingPrice'),
       render: (_: unknown, item: Record<string, unknown>) => {
         const pricing = item.pricing as PricingTier[]
         if (!pricing || pricing.length === 0) return '-'
         const paidPlans = pricing.filter(p => p.value && p.value > 0)
-        if (paidPlans.length === 0) return tComparison('pricingValues.freeOnly')
+        if (paidPlans.length === 0) return t('pricingValues.freeOnly')
         const minPrice = Math.min(...paidPlans.map(p => p.value as number))
         const minPlan = paidPlans.find(p => p.value === minPrice)
         return minPlan ? formatPrice(minPlan) : '-'
       },
     },
     {
       key: 'pricing-max',
-      label: tComparison('columns.maxPrice'),
+      label: t('columns.maxPrice'),
       render: (_: unknown, item: Record<string, unknown>) => {
         const pricing = item.pricing as PricingTier[]
         if (!pricing || pricing.length === 0) return '-'
@@ -280,20 +280,20 @@ export default function CLIComparisonPageClient({ locale }: Props) {
 
       <Breadcrumb
         items={[
-          { name: tStacks('aiCodingStack'), href: '/ai-coding-stack' },
-          { name: tStacks('clis'), href: '/clis' },
-          { name: tStacks('comparison'), href: '/clis/comparison' },
+          { name: tGlobal('shared.common.aiCodingStack'), href: '/ai-coding-stack' },
+          { name: tGlobal('shared.stacks.clis'), href: '/clis' },
+          { name: tGlobal('shared.common.comparison'), href: '/clis/comparison' },
         ]}
       />
 
       {/* Page Header */}
       <section className="py-[var(--spacing-lg)] border-[var(--color-border)]">
         <div className="max-w-8xl mx-auto px-[var(--spacing-md)]">
           <h1 className="text-3xl font-semibold tracking-[-0.03em] mb-[var(--spacing-sm)]">
-            {tComparison('clis.title')}
+            {t('clis.title')}
           </h1>
           <p className="text-base text-[var(--color-text-secondary)] font-light">
-            {tComparison('clis.subtitle')}
+            {t('clis.subtitle')}
           </p>
         </div>
       </section>
@@ -316,7 +316,7 @@ export default function CLIComparisonPageClient({ locale }: Props) {
             href={`/${locale}/clis`}
             className="inline-flex items-center gap-[var(--spacing-xs)] text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors"
           >
-            ← {tComparison('clis.backTo')}
+            ← {t('clis.backTo')}
           </Link>
         </div>
       </section>

src/app/[locale]/clis/comparison/page.tsx

@@ -1,3 +1,4 @@
+import type { Locale } from '@/i18n/config'
 import { generateComparisonMetadata } from '@/lib/metadata'
 import CLIComparisonPageClient from './page.client'
 
@@ -9,7 +10,7 @@ export async function generateMetadata({ params }: Props) {
   const { locale } = await params
 
   return await generateComparisonMetadata({
-    locale: locale as 'en' | 'zh-Hans',
+    locale: locale as Locale,
     category: 'clis',
   })
 }

src/app/[locale]/clis/page.client.tsx

@@ -18,7 +18,7 @@ type Props = {
 }
 
 export default function CLIsPageClient({ locale }: Props) {
-  const t = useTranslations('stacksPages.clis')
+  const t = useTranslations('pages.clis')
   const tGlobal = useTranslations()
   const [sortOrder, setSortOrder] = useState<'default' | 'name-asc' | 'name-desc'>('default')
   const [licenseFilters, setLicenseFilters] = useState<string[]>([])