迁移至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
相关产品推荐
相关产品推荐

