SUGESTÃO | Next.js: explorando o framework | Alura

Quando criamos o componente de Link para não termos a necessidade de sempre estar importando o link do next, se seguirmos o exemplo do professor, podemos cometer um pequeno equivoco, seguindo essa etapa da aula => https://cursos.alura.com.br/course/next-js-iniciando-framework/task/99996 notamos que na aula o professor cria para o componente Link uma prop children e uma prop ref, onde ele retorna o link do next e uma tag a do html, mas no exemplo do link acima, ele cria um componente personalizado, pegando esse componente personalizado e implementando na estrutura que é nos dada na aula, gera um problema, onde nós teremos duas tags do tipo a, pois a prop children é utilizada dentro de uma tag a e o componente personalizado já tem uma tag desse tipo, a sugestão é, criar somente um prop children e quando for utilizar a tag do tipo a seguir o exemplo do link. Dessa maneira evitamos redundância no nosso código e também, não necessitamos ficar passando diversas props para o nosso componente.

Utilizar isso:

import Link from "../src/components/Link";

<Link href="/faq">
     <a>Ir para o FAQ</a>
</Link>

Componente corrigido:

import NextLink from "next/link";

export default function Link({children, href}){
  return (
    <NextLink href={href} passHref>
      {children}
    </NextLink>
  );
};

Não utilizar:

import Link from "../src/components/Link";

<Link href="/faq">
    Ir para o FAQ 
</Link>

Componente antes da correção:

import NextLink from "next/link";

export default function Link({children, href, ...props}){
  return (
    <NextLink href={href} passHref>
      <a {...props}>{children}</a>
    </NextLink>
  );
};