next-intl Link组件href仅接受"/"和"/pathnames"字符串值的异常问题

这不是next-intl的Bug，问题出在你的pathnames配置缺失了目标路径，导致类型系统只允许已配置的路径作为Link的href值。

next-intl的本地化导航组件（包括createLocalizedPathnamesNavigation生成的Link）会严格基于i18nconfig.ts中定义的pathnames生成类型约束，只有在该对象中声明过的路径才能被合法传入href属性。

解决步骤： #

1. 打开i18nconfig.ts，在pathnames对象中添加你需要的路径配置：

   // i18nconfig.ts
   import { Pathnames } from 'next-intl/navigation';
   import { locales } from './your-locale-config';
   
   export const pathnames = {
     // 保留已有的配置
     '/': '/',
     '/pathnames': '/pathnames',
     // 添加/users静态路径
     '/users': '/users',
     // 如果是带动态参数的路径，比如/users/[userId]
     '/users/[userId]': '/users/[userId]'
   } satisfies Pathnames<typeof locales>;
   

2. 若是多语言场景，可针对不同locale配置本地化路径：

   export const pathnames = {
     '/': '/',
     '/pathnames': '/pathnames',
     '/users': {
       en: '/users',
       zh: '/用户列表'
     },
     '/users/[userId]': {
       en: '/users/[userId]',
       zh: '/用户详情/[userId]'
     }
   } satisfies Pathnames<typeof locales>;
   

3. 配置完成后，Link组件即可正常使用目标路径：

   <Link
     href={{
       pathname: '/users/[userId]',
       params: { userId: '5' }
     }}
     className="flex"
   >
     <link.icon size={24} />
     <span className="ml-2">{link.title}</span>
   </Link>
   

补充说明： #

next-intl的这种类型约束是为了确保所有导航路径都经过本地化处理，避免未配置的路径导致多语言路由异常。而原生Next.js Link不涉及本地化校验，因此没有这类限制。

内容的提问来源于stack exchange，提问作者Sam Chang