refactor(i18n): use localized Link/router from i18n/navigation

ericyangpan · claude · ericyangpan · commit 56339a99d763 · 2025-11-30T22:29:09.000+08:00
Remove hardcoded locale prefixes from all link hrefs and router navigation throughout the application. Use i18n-aware Link component and router from @/i18n/navigation which automatically handles locale prefixes. This refactoring: - Removes manual locale path construction (e.g., `/${locale}/path`) - Uses localized Link/router for automatic locale prefix injection - Removes unused locale parameters where no longer needed - Improves consistency across all navigation components 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/src/app/[locale]/clis/comparison/page.client.tsx b/src/app/[locale]/clis/comparison/page.client.tsx
@@ -17,7 +17,7 @@ type Props = {
   locale: string
 }
 
-export default function CLIComparisonPageClient({ locale }: Props) {
+export default function CLIComparisonPageClient({ locale: _locale }: Props) {
   const t = useTranslations('pages.comparison')
   const tCommunity = useTranslations('shared.platforms')
   const tGlobal = useTranslations()
@@ -304,7 +304,7 @@ export default function CLIComparisonPageClient({ locale }: Props) {
           <ComparisonTable
             items={clis as unknown as Record<string, unknown>[]}
             columns={columns}
-            itemLinkPrefix={`/${locale}/clis`}
+            itemLinkPrefix={`/clis`}
           />
         </div>
       </section>
@@ -313,7 +313,7 @@ export default function CLIComparisonPageClient({ locale }: Props) {
       <section className="py-[var(--spacing-lg)] border-b border-[var(--color-border)]">
         <div className="max-w-8xl mx-auto px-[var(--spacing-md)]">
           <Link
-            href={`/${locale}/clis`}
+            href="/clis"
             className="inline-flex items-center gap-[var(--spacing-xs)] text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors"
           >
             ← {t('clis.backTo')}
diff --git a/src/app/[locale]/clis/page.client.tsx b/src/app/[locale]/clis/page.client.tsx
@@ -104,7 +104,7 @@ export default function CLIsPageClient({ locale }: Props) {
             subtitle={t('subtitle')}
             action={
               <Link
-                href={`/${locale}/clis/comparison`}
+                href="/clis/comparison"
                 className="text-sm px-[var(--spacing-md)] py-[var(--spacing-xs)] border border-[var(--color-border)] hover:border-[var(--color-border-strong)] transition-colors"
               >
                 {t('compareAll')} →
@@ -134,7 +134,7 @@ export default function CLIsPageClient({ locale }: Props) {
               {filteredAndSortedClis.map(cli => (
                 <Link
                   key={cli.name}
-                  href={`/${locale}/clis/${cli.id}`}
+                  href={`/clis/${cli.id}`}
                   className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-0.5 group flex flex-col"
                 >
                   <div className="flex justify-between items-start mb-[var(--spacing-sm)]">
diff --git a/src/app/[locale]/extensions/comparison/page.client.tsx b/src/app/[locale]/extensions/comparison/page.client.tsx
@@ -16,7 +16,7 @@ type Props = {
   locale: string
 }
 
-export default function ExtensionComparisonPageClient({ locale }: Props) {
+export default function ExtensionComparisonPageClient({ locale: _locale }: Props) {
   const t = useTranslations('pages.comparison')
   const tCommunity = useTranslations('shared.platforms')
   const tGlobal = useTranslations()
@@ -290,7 +290,7 @@ export default function ExtensionComparisonPageClient({ locale }: Props) {
           <ComparisonTable
             items={extensions as unknown as Record<string, unknown>[]}
             columns={columns}
-            itemLinkPrefix={`/${locale}/extensions`}
+            itemLinkPrefix={`/extensions`}
           />
         </div>
       </section>
@@ -299,7 +299,7 @@ export default function ExtensionComparisonPageClient({ locale }: Props) {
       <section className="py-[var(--spacing-lg)] border-b border-[var(--color-border)]">
         <div className="max-w-8xl mx-auto px-[var(--spacing-md)]">
           <Link
-            href={`/${locale}/extensions`}
+            href="/extensions"
             className="inline-flex items-center gap-[var(--spacing-xs)] text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors"
           >
             ← {t('extensions.backTo')}
diff --git a/src/app/[locale]/extensions/page.client.tsx b/src/app/[locale]/extensions/page.client.tsx
@@ -105,7 +105,7 @@ export default function ExtensionsPageClient({ locale }: Props) {
             subtitle={t('subtitle')}
             action={
               <Link
-                href={`/${locale}/extensions/comparison`}
+                href="/extensions/comparison"
                 className="text-sm px-[var(--spacing-md)] py-[var(--spacing-xs)] border border-[var(--color-border)] hover:border-[var(--color-border-strong)] transition-colors"
               >
                 {t('compareAll')} →
@@ -137,7 +137,7 @@ export default function ExtensionsPageClient({ locale }: Props) {
               {filteredAndSortedExtensions.map(extension => (
                 <Link
                   key={extension.name}
-                  href={`/${locale}/extensions/${extension.id}`}
+                  href={`/extensions/${extension.id}`}
                   className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-0.5 group flex flex-col"
                 >
                   <div className="flex justify-between items-start mb-[var(--spacing-sm)]">
diff --git a/src/app/[locale]/ides/comparison/page.client.tsx b/src/app/[locale]/ides/comparison/page.client.tsx
@@ -17,7 +17,7 @@ type Props = {
   locale: string
 }
 
-export default function IDEComparisonPageClient({ locale }: Props) {
+export default function IDEComparisonPageClient({ locale: _locale }: Props) {
   const t = useTranslations('pages.comparison')
   const tCommunity = useTranslations('shared.platforms')
   const tGlobal = useTranslations()
@@ -303,7 +303,7 @@ export default function IDEComparisonPageClient({ locale }: Props) {
           <ComparisonTable
             items={ides as unknown as Record<string, unknown>[]}
             columns={columns}
-            itemLinkPrefix={`/${locale}/ides`}
+            itemLinkPrefix={`/ides`}
           />
         </div>
       </section>
@@ -312,7 +312,7 @@ export default function IDEComparisonPageClient({ locale }: Props) {
       <section className="py-[var(--spacing-lg)] border-b border-[var(--color-border)]">
         <div className="max-w-8xl mx-auto px-[var(--spacing-md)]">
           <Link
-            href={`/${locale}/ides`}
+            href="/ides"
             className="inline-flex items-center gap-[var(--spacing-xs)] text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors"
           >
             ← {t('ides.backTo')}
diff --git a/src/app/[locale]/ides/page.client.tsx b/src/app/[locale]/ides/page.client.tsx
@@ -104,7 +104,7 @@ export default function IDEsPageClient({ locale }: Props) {
             subtitle={t('subtitle')}
             action={
               <Link
-                href={`/${locale}/ides/comparison`}
+                href="/ides/comparison"
                 className="text-sm px-[var(--spacing-md)] py-[var(--spacing-xs)] border border-[var(--color-border)] hover:border-[var(--color-border-strong)] transition-colors"
               >
                 {t('compareAll')} →
@@ -134,7 +134,7 @@ export default function IDEsPageClient({ locale }: Props) {
               {filteredAndSortedIdes.map(ide => (
                 <Link
                   key={ide.name}
-                  href={`/${locale}/ides/${ide.id}`}
+                  href={`/ides/${ide.id}`}
                   className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-0.5 group flex flex-col"
                 >
                   <div className="flex justify-between items-start mb-[var(--spacing-sm)]">
diff --git a/src/app/[locale]/model-providers/page.client.tsx b/src/app/[locale]/model-providers/page.client.tsx
@@ -91,7 +91,7 @@ export default function ModelProvidersPageClient({ locale }: Props) {
               {foundationModelProviders.map(provider => (
                 <Link
                   key={provider.name}
-                  href={`/${locale}/model-providers/${provider.id}`}
+                  href={`/model-providers/${provider.id}`}
                   className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-0.5 group"
                 >
                   <div className="flex justify-between items-start mb-[var(--spacing-sm)]">
@@ -116,7 +116,7 @@ export default function ModelProvidersPageClient({ locale }: Props) {
               {modelServiceProviders.map(provider => (
                 <Link
                   key={provider.name}
-                  href={`/${locale}/model-providers/${provider.id}`}
+                  href={`/model-providers/${provider.id}`}
                   className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-0.5 group"
                 >
                   <div className="flex justify-between items-start mb-[var(--spacing-sm)]">
diff --git a/src/app/[locale]/models/comparison/page.client.tsx b/src/app/[locale]/models/comparison/page.client.tsx
@@ -13,7 +13,7 @@ type Props = {
   locale: string
 }
 
-export default function ModelComparisonPageClient({ locale }: Props) {
+export default function ModelComparisonPageClient({ locale: _locale }: Props) {
   const t = useTranslations('pages.comparison')
   const tGlobal = useTranslations()
   const tCommunity = useTranslations('shared.platforms')
@@ -165,7 +165,7 @@ export default function ModelComparisonPageClient({ locale }: Props) {
           <ComparisonTable
             items={models as unknown as Record<string, unknown>[]}
             columns={columns}
-            itemLinkPrefix={`/${locale}/models`}
+            itemLinkPrefix={`/models`}
           />
         </div>
       </section>
@@ -174,7 +174,7 @@ export default function ModelComparisonPageClient({ locale }: Props) {
       <section className="py-[var(--spacing-lg)] border-b border-[var(--color-border)]">
         <div className="max-w-8xl mx-auto px-[var(--spacing-md)]">
           <Link
-            href={`/${locale}/models`}
+            href="/models"
             className="inline-flex items-center gap-[var(--spacing-xs)] text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition-colors"
           >
             ← {t('models.backTo')}
diff --git a/src/app/[locale]/models/page.client.tsx b/src/app/[locale]/models/page.client.tsx
@@ -68,7 +68,7 @@ export default function ModelsPageClient({ locale }: Props) {
             subtitle={t('subtitle')}
             action={
               <Link
-                href={`/${locale}/models/comparison`}
+                href="/models/comparison"
                 className="text-sm px-[var(--spacing-md)] py-[var(--spacing-xs)] border border-[var(--color-border)] hover:border-[var(--color-border-strong)] transition-colors"
               >
                 {t('compareAll')} →
@@ -93,7 +93,7 @@ export default function ModelsPageClient({ locale }: Props) {
             {filteredModels.map(model => (
               <Link
                 key={model.name}
-                href={`/${locale}/models/${model.id}`}
+                href={`/models/${model.id}`}
                 className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-0.5 group"
               >
                 <div className="flex justify-between items-start mb-[var(--spacing-sm)]">
diff --git a/src/app/[locale]/search/page.client.tsx b/src/app/[locale]/search/page.client.tsx
@@ -1,12 +1,12 @@
 'use client'
 
-import { useRouter, useSearchParams } from 'next/navigation'
+import { useSearchParams } from 'next/navigation'
 import { useTranslations } from 'next-intl'
 import { useEffect, useMemo, useState } from 'react'
 import SearchInput from '@/components/controls/SearchInput'
 import Footer from '@/components/Footer'
 import Header from '@/components/Header'
-import { Link } from '@/i18n/navigation'
+import { Link, useRouter } from '@/i18n/navigation'
 import type { SearchResult } from '@/lib/search'
 import { search } from '@/lib/search'
 
@@ -44,13 +44,14 @@ export default function SearchPageClient({ locale, initialQuery }: Props) {
     if (searchQuery.trim()) {
       params.set('q', searchQuery.trim())
     }
-    router.push(`/${locale}/search?${params.toString()}`)
+    // Use i18n router which automatically handles locale prefix
+    router.push(`/search?${params.toString()}`)
     setTimeout(() => setIsSearching(false), 300)
   }
 
   // Get category route
   const getCategoryRoute = (category: string, id: string) => {
-    return `/${locale}/${category}/${id}`
+    return `/${category}/${id}`
   }
 
   return (
diff --git a/src/app/[locale]/vendors/page.client.tsx b/src/app/[locale]/vendors/page.client.tsx
@@ -82,7 +82,7 @@ export default function VendorsPageClient({ locale }: Props) {
             {filteredVendors.map(vendor => (
               <Link
                 key={vendor.id}
-                href={`/${locale}/vendors/${vendor.id}`}
+                href={`/vendors/${vendor.id}`}
                 className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-0.5 group"
               >
                 <div className="flex justify-between items-start mb-[var(--spacing-sm)]">
diff --git a/src/components/controls/SearchInput.tsx b/src/components/controls/SearchInput.tsx
@@ -179,7 +179,7 @@ export default function SearchInput({
                 <div className="flex-shrink-0">
                   <span className="inline-block px-2 py-0.5 text-xs border border-[var(--color-border)] text-[var(--color-text-muted)]">
                     {t(
-                      `stacks.${result.category === 'providers' ? 'modelProviders' : result.category}`
+                      `shared.stacks.${result.category === 'providers' ? 'modelProviders' : result.category}`
                     )}
                   </span>
                 </div>
diff --git a/src/components/navigation/StackTabs.tsx b/src/components/navigation/StackTabs.tsx
@@ -12,27 +12,27 @@ interface StackTabsProps {
   locale: string
 }
 
-function StackTabs({ activeStack, locale }: StackTabsProps) {
+function StackTabs({ activeStack, locale: _locale }: StackTabsProps) {
   const tStacks = useTranslations('shared.stacks')
 
   const tabs = useMemo(() => {
     return [
-      { id: 'ides' as StackId, title: tStacks('ides'), path: `/${locale}/ides` },
-      { id: 'clis' as StackId, title: tStacks('clis'), path: `/${locale}/clis` },
+      { id: 'ides' as StackId, title: tStacks('ides'), path: `/ides` },
+      { id: 'clis' as StackId, title: tStacks('clis'), path: `/clis` },
       {
         id: 'extensions' as StackId,
         title: tStacks('extensions'),
-        path: `/${locale}/extensions`,
+        path: `/extensions`,
       },
-      { id: 'models' as StackId, title: tStacks('models'), path: `/${locale}/models` },
+      { id: 'models' as StackId, title: tStacks('models'), path: `/models` },
       {
         id: 'model-providers' as StackId,
         title: tStacks('modelProviders'),
-        path: `/${locale}/model-providers`,
+        path: `/model-providers`,
       },
-      { id: 'vendors' as StackId, title: tStacks('vendors'), path: `/${locale}/vendors` },
+      { id: 'vendors' as StackId, title: tStacks('vendors'), path: `/vendors` },
     ]
-  }, [locale, tStacks])
+  }, [tStacks])
 
   return (
     <div className="border-b border-[var(--color-border)] mb-[var(--spacing-lg)]">
diff --git a/src/components/sidebar/DocsSidebar.tsx b/src/components/sidebar/DocsSidebar.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useLocale, useTranslations } from 'next-intl'
+import { useTranslations } from 'next-intl'
 import type { DocSection } from '@/lib/generated/docs'
 import Sidebar, { type SidebarItem } from './Sidebar'
 
@@ -22,7 +22,6 @@ const docOrder = [
 
 export default function DocsSidebar({ sections, activeSlug }: DocsSidebarProps) {
   const t = useTranslations('components.docsSidebar')
-  const locale = useLocale()
 
   // Sort sections by custom order
   const sortedSections = [...sections].sort((a, b) => {
@@ -47,7 +46,7 @@ export default function DocsSidebar({ sections, activeSlug }: DocsSidebarProps)
   const items: SidebarItem[] = sortedSections.map(section => ({
     id: section.slug,
     title: section.title,
-    href: `/${locale}/docs/${section.slug}`,
+    href: `/docs/${section.slug}`,
   }))
 
   const icon = (
diff --git a/src/components/vendor/VendorModels.tsx b/src/components/vendor/VendorModels.tsx
@@ -7,7 +7,7 @@ type Props = {
   title: string
 }
 
-export function VendorModels({ models, locale, title }: Props) {
+export function VendorModels({ models, locale: _locale, title }: Props) {
   if (models.length === 0) {
     return null
   }
@@ -20,7 +20,7 @@ export function VendorModels({ models, locale, title }: Props) {
         {models.map(model => (
           <Link
             key={model.id}
-            href={`/${locale}/models/${model.id}`}
+            href={`/models/${model.id}`}
             className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-0.5 group"
           >
             <div className="flex items-start justify-between mb-[var(--spacing-xs)]">
diff --git a/src/components/vendor/VendorProducts.tsx b/src/components/vendor/VendorProducts.tsx
@@ -17,7 +17,7 @@ const PRODUCT_TYPE_LABELS = {
   extension: 'Extension',
 } as const
 
-export function VendorProducts({ products, locale, title }: Props) {
+export function VendorProducts({ products, locale: _locale, title }: Props) {
   if (products.length === 0) {
     return null
   }
@@ -30,7 +30,7 @@ export function VendorProducts({ products, locale, title }: Props) {
         {products.map(product => (
           <Link
             key={product.id}
-            href={`/${locale}/${product.type === 'ide' ? 'ides' : product.type === 'cli' ? 'clis' : 'extensions'}/${product.id}`}
+            href={`/${product.type === 'ide' ? 'ides' : product.type === 'cli' ? 'clis' : 'extensions'}/${product.id}`}
             className="block border border-[var(--color-border)] p-[var(--spacing-md)] hover:border-[var(--color-border-strong)] transition-all hover:-translate-y-0.5 group"
           >
             <div className="flex items-start justify-between mb-[var(--spacing-xs)]">
