英文:
LinkProps is missing in next-intl/link (when migrating from next/link)
问题
I used LinkProps
to create custom Link
wrappers and pass native props along with my custom ones. Pretty standard pattern:
import { type LinkProps } from "next/link";
import { type ImageProps } from "next/image";
export interface NavbarItemProps extends LinkProps {
title: string;
icon: ImageProps['src'],
}
// and then goes my component:
export function NavbarItem({ icon, title, ...props }: NavbarItemProps) {
// ...
}
但是一旦我迁移到next-intl/link
,我发现它不导出任何LinkProps
。
而旧的LinkProps
与来自next-intl/link
的新Link
组件不兼容,因为它覆盖了locale选项:
type Props = Omit<ComponentProps<typeof BaseLink>, 'locale'> & {
locale?: string;
};
PS. 我使用的版本:
next v13.4.2
next-intl v2.14.2
迄今为止我找到的唯一解决方案(以帮助其他人解决相同的问题) - 我从组件的参数中提取了这个新的/被覆盖的props类型(请参见我的下面的评论)。
如果next-intl
的作者为我们导出这种类型,就像我们在next/link
中所做的那样,那将是很好的,它将使这种迁移更加顺畅。
英文:
I used LinkProps
to create custom Link
wrappers and pass native props along with my custom ones. Pretty standard pattern:
import {type LinkProps} from "next/link";
import {type ImageProps} from "next/image";
export interface NavbarItemProps extends LinkProps {
title: string;
icon: ImageProps['src'],
}
// and then goes my component:
export function NavbarItem({ icon, title, ...props }: NavbarItemProps) {
// ...
}
but once I migrated to next-intl/link
- I found out that it doesn't export any LinkProps
.
And old LinkProps
is incompatible with the new Link
component from next-intl/link
because of overridden locale option:
type Props = Omit<ComponentProps<typeof BaseLink>, 'locale'> & {
locale?: string;
};
PS. Versions I used:
next v13.4.2
next-intl v2.14.2
The only solution I found so far (to help the others who faced the same issue) - I extracted that new/overridden props type from the component's parameters (see my comment below).
Would be nice if next-intl
authors exported that type for us to import, just like we had with the next/link
. It would make such migrations smoother.
答案1
得分: 2
Consider using the existing type of react for this purpose:
import Link from "next-intl/link";
// use the predefined type from react for this purpose
export type LinkProps = React.ComponentProps<typeof Link>;
// now you can extend it as usual
export interface NavbarItemProps extends LinkProps {
title: string;
// ...
}
英文:
Consider using the existing type of react for this purpose:
import Link from "next-intl/link";
// use the predefined type from react for this purpose
export type LinkProps = React.ComponentProps<typeof Link>;
// now you can extend it as usual
export interface NavbarItemProps extends LinkProps {
title: string;
// ...
}
答案2
得分: 1
关闭缺失类型的差距 - 我只是从组件的参数中提取了它:
import Link from "next-intl/link"; // this is our new Link that doesn't export LinkProps
// extracting it from the parameters
type LinkProps = Parameters<typeof Link>[0];
// now we can extend it as usual
export interface NavbarItemProps extends LinkProps {
title: string;
// ...
}
英文:
to close the gap with a missing type - I just extracted it from the component's parameters:
import Link from "next-intl/link"; // this is our new Link that doesn't export LinkProps
// extracting it from the parameters
type LinkProps = Parameters<typeof Link>[0];
// now we can extend it as usual
export interface NavbarItemProps extends LinkProps {
title: string;
// ...
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论