NextLink children prop

[iodimitrov]

Hi,

When there are children present in the <NextLink /> component, the linter gives an error that children for the component are not supported.

I solved it by adding React.PropsWithChildren:

import React, { forwardRef } from 'react';
import Link from 'next/link';

export const NextLink = forwardRef(
  (
    { href, ...others }: React.PropsWithChildren<React.ComponentPropsWithoutRef<typeof Link>>,
    ref: React.ForwardedRef<HTMLAnchorElement>
  ) => (
    <Link href={href}>
      {/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
      <a {...others} ref={ref} />
    </Link>
  )
);

[rtivital]

NextLink is a legacy component, that was used for elementRef prop. Since version 3.0 you should be able to use next Link component without wrappers:

<Link href="/hello">
  <Anchor>Your link</Anchor>
</Link>

[iodimitrov]

Thank you :))