You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

迁移至next-intl/link时缺失LinkProps类型的问题

问题描述

之前基于next/link的LinkProps实现自定义导航项组件,代码如下:

import {type LinkProps} from "next/link";
import {type ImageProps} from "next/image";

export interface NavbarItemProps extends LinkProps {
  title: string;
  icon: ImageProps['src'],
}

export function NavbarItem({ icon, title, ...props }: NavbarItemProps) {
  // 组件逻辑实现
}

迁移到next-intl/link后,发现该库未导出对应的LinkProps类型,且next/link原生的LinkProps因locale属性被重写,与next-intl/link的组件不兼容(其内部类型定义为:

type Props = Omit<ComponentProps<typeof BaseLink>, 'locale'> & {
  locale?: string;
};

)。当前使用版本:next v13.4.2、next-intl v2.14.2。

临时解决方案

可以通过ComponentProps从next-intl/link组件本身提取类型,以此定义自定义组件的Props:

import Link from 'next-intl/link';
import {type ComponentProps} from 'react';
import {type ImageProps} from "next/image";

// 从next-intl/link组件提取原生Props类型
type NextIntlLinkProps = ComponentProps<typeof Link>;

// 扩展自定义属性
export interface NavbarItemProps extends NextIntlLinkProps {
  title: string;
  icon: ImageProps['src'],
}

export function NavbarItem({ icon, title, ...props }: NavbarItemProps) {
  // 组件逻辑实现
}
诉求建议

希望next-intl官方能像next/link一样,直接导出Link组件对应的Props类型,降低迁移成本,提升开发体验。

内容的提问来源于stack exchange,提问作者Roman86

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.21 06:42:38