Olá Rodrigo, tudo bem contigo?
No Next.js, a biblioteca React foi estendida com o componente Link para navegação entre páginas da aplicação. Anteriormente, na versão 9 e anteriores do Next.js, era comum utilizar a tag <a> dentro do componente Link para criar links entre páginas.
No entanto, a partir da versão 10 do Next.js, a equipe de desenvolvimento decidiu fazer uma alteração para melhorar o desempenho e a experiência do desenvolvedor. Agora, em vez de usar a tag <a>, você pode passar qualquer elemento como filho para o componente Link. Isso significa que você não precisa mais se limitar a usar apenas a tag <a>.
Essa mudança tem várias vantagens. Por exemplo, se você estiver usando um componente estilizado de uma biblioteca como o Material UI, você pode passar esse componente diretamente para o Link, sem a necessidade de envolvê-lo com uma tag <a>. Isso simplifica o código e evita problemas com estilos e comportamentos inesperados.
Aqui está um exemplo de como você pode usar o componente Link no Next.js sem a tag <a>:
import Link from 'next/link';
import { Button } from '@material-ui/core';
function HomePage() {
return (
<div>
<h1>Home</h1>
<Link href="/about" passHref>
<Button variant="contained" color="primary">
Go to About Page
</Button>
</Link>
</div>
);
}
export default HomePage;
Neste exemplo, estamos usando o componente Button do Material UI dentro do Link. O Link envolve o botão e, quando clicado, navegará para a página "/about".
Essa flexibilidade permite que você use qualquer elemento ou componente como filho do Link, desde que eles sejam compatíveis com a interação do usuário e respondam ao evento de clique corretamente.
Em resumo, não é mais necessário usar a tag <a> dentro do componente Link no Next.js. Agora você pode passar qualquer elemento ou componente como filho direto do Link, tornando o código mais simples e evitando problemas com estilos e comportamentos inesperados.
No geral era isso, espero ter esclarecido sua dúvida.
Abraços e bons estudos.