# Multi Language TypeScript - internalLinkComponent

**URL:** <https://community.prismic.io/t/multi-language-typescript-internallinkcomponent/13232>\
**Category:** Developing with Prismic\
**Tags:** nextjs, typescript\
**Created:** [May 30, 2023, 3:25pm UTC](https://community.prismic.io/t/multi-language-typescript-internallinkcomponent/13232 "2023-05-30T15:25:56Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![fred4](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/fred4/32/5983_2.png) [@fred4](https://community.prismic.io/u/fred4)\
**Post date:** [May 30, 2023, 3:25pm UTC](https://community.prismic.io/t/multi-language-typescript-internallinkcomponent/13232/1 "2023-05-30T15:25:56Z")

</div>

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

```auto
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'.

```

```auto
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>
  );
}

```

---

<div class="post-metadata">

**Author:** ![racheal.orukele](https://avatars.discourse-cdn.com/v4/letter/r/ee7513/32.png) [@racheal.orukele](https://community.prismic.io/u/racheal.orukele)\
**Post date:** [June 5, 2023, 11:03am UTC](https://community.prismic.io/t/multi-language-typescript-internallinkcomponent/13232/3 "2023-06-05T11:03:05Z")

</div>

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.

```auto
<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.