<NextLink /> abstraction

Simplifying the use of next-link
// next-link.tsx
import React, {forwardRef} from 'react';
import Link from 'next/link';

export const BaseNextLink = (
  {href, ...rest}: React.ComponentPropsWithoutRef<typeof Link>,
  ref: React.ForwardedRef<HTMLAnchorElement>
) => (
  <Link href={href}>
    <a {...rest} ref={ref} />
  </Link>
);

export const NextLink = forwardRef(BaseNextLink);

usage

<NextLink
  href={`${TEAMMATES_PAGE}/${teammate.id}`}
  className="text-blue-400 text-xs p-2 bg-blue-50 hover:bg-blue-100 rounded-md inline-flex items-center"
>
  View more
  <ChevronRightIcon className="h-3 w-3" />
</NextLink>