internalComponent has confusing type errors

[AO19]

Versions

• @prismicio/client: 7.16.0,
• @prismicio/helpers: 2.3.9,
• @prismicio/next: 2.0.0,
• @prismicio/react: 3.0.0,
• @prismicio/slice-simulator-react: 0.2.3,
• react: 19.0.0
• next: 15.1.7
• Node.js: v22.12.0

Reproduction

Additional Details

import {
  PrismicLink as BasePrismicLink,
  LinkProps,
  PrismicLinkProps,
} from '@prismicio/react';
import Link from 'next/link';
import { linkResolver } from 'prismicio';

function InternalLink(props: LinkProps) {
  return <Link {...props} />;
}

export function PrismicLink(props: PrismicLinkProps) {
  return (
    <BasePrismicLink
      linkResolver={linkResolver}
      internalComponent={InternalLink}
      {...props}
    />
  );
}

Steps to reproduce

I followed this guide in my Next.js (Pages Router) app. Very confusing to be honest.

What is expected?

PrismicLink accepts InternalLink (Next Link component).

What is actually happening?

Type '(props: LinkProps) => Element' is not assignable to type 'ElementType<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>> | undefined'.
  Type '(props: LinkProps) => Element' is not assignable to type 'FunctionComponent<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>>'.
    Types of parameters 'props' and 'props' are incompatible.
      Type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>' is not assignable to type 'LinkProps'.
        Types of property 'href' are incompatible.
          Type 'string | undefined' is not assignable to type 'string'.
            Type 'undefined' is not assignable to type 'string'.ts(2322)
PrismicLink.d.ts(45, 5): The expected type comes from property 'internalComponent' which is declared here on type 'IntrinsicAttributes & (PrismicLinkProps<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, DetailedHTMLProps<...>> & { ...; })'

[AO19]

Probably duplicate: #173

[angeloashmore]

Hi @AO19, if you are using Next.js, you are better off using @prismicio/next's <PrismicNextLink> component instead. It can be used just like the <PrismicLink> component you are currently using, but it is already configured to use next/link.

Essentially, you can remove your custom <PrismicLink> component and replace <PrismicLink> throughout your app with <PrismicNextLink>.

- import { PrismicLink } from "@prismicio/react";
+ import { PrismicNextLink } from "@prismicio/next/pages";

- <PrismicLink field={slice.primary.my_link_field} />
+ <PrismicNextLink field={slice.primary.my_link_field} />

(This example imports the component from @prismicio/next/pages because you are using the Pages Router.)

You can see an example of its usage in Next.js apps here: https://prismic.io/docs/fields/link#display-links

You can see its API reference here: https://prismic.io/docs/technical-reference/prismicio-next/v2#prismicnextlink

[AO19]

Cannot validate this yet, due to another problem: Error: Failed to load external module @prismicio/next/pages: Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/xxx/webapp/node_modules/next/link' imported from /Users/xxx/webapp/node_modules/@prismicio/next/dist/PrismicNextLink.js Did you mean to import "next/link.js"?

I'll just wait for the next updates.