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.