Multi Language TypeScript - internalLinkComponent

Developing with Prismic
,
1

I try to fix the missing locale for this multi language site but I getting this error;

Type 'FC<CustomLinkProps>' is not assignable to type 'ComponentType<LinkProps> | undefined'.
  Type 'FunctionComponent<CustomLinkProps>' is not assignable to type 'FunctionComponent<LinkProps>'.
    Types of parameters 'props' and 'props' are incompatible.
      Type 'LinkProps' is not assignable to type 'CustomLinkProps'.

interface CustomLinkProps extends LinkProps {
  locale: string;
}

const CustomLink: React.FC<CustomLinkProps> = ({
  href,
  children,
  locale,
  ...props
}) => {
  return (
    <Link href={href} locale={locale} {...props}>
      {children}
    </Link>
  );
};

export default function App({ Component, pageProps }: AppProps) {
  return (
    <PrismicProvider
      repositoryName={repositoryName}
      linkResolver={linkResolver}
      internalLinkComponent={CustomLink}
    >
      <PrismicPreview repositoryName={repositoryName}>
        <div className={`${inter.variable} font-sans`}>
          <Component {...pageProps} />
        </div>
      </PrismicPreview>
    </PrismicProvider>
  );
}
3

Hello @fred4,

Welcome to Prismic community, and thanks for reaching out to us.

I'm sorry for the delayed response.

We recommend that developers use <PrismicNextLink> now, which automatically supports all next/link props, including locale. <PrismicLink> should not be used in Next.js projects going forward. With <PrismicNextLink>, there is no need to use <PrismicProvider> in _app.tsx.<PrismicNextLink> is available as of @prismicio/next v1.1.0.

However, I can still provide information about the error and how to fix it. We ultimately recommend developers use <PrismicNextLink> instead. This happens because CustomLink requires a locale prop, but PrismicProvider can't guarantee that a locale will always be provided. The component's props can be edited to make it work:

interface CustomLinkProps extends LinkProps { locale?: string; }

Note that locale? now has a ? at the end, which marks the property as optional. Using <PrismicLink> with a custom prop will require special syntax to let it know about the props.

<PrismicLink<CustomLinkProps> field={myLinkField} locale="en-us" > Click me! </PrismicLink>

Note that <PrismicLink> requires <CustomLinkProps> to be declared immediately after PrismicLink.

I am assuming LinkProps comes from @prismicio/react (i.e. import { LinkProps } from "@prismicio/react";). With LinkProps from @prismicio/react:

With LinkProps from next/link`:

<PrismicProvider internalLinkComponent={(props) => <CustomLink {...props} />} >

But it technically can be made to work with either.

Let me know if you have further questions.

Thanks,
Racheal.