LinkProps is missing in next-intl/link (when migrating from next/link)

Question

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.

Answer 1

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;
  // ...
}