1
resposta

[Dúvida] Duvida tag "a" não existe mais dentro do Link

Tentei seguir o exemplo porém não entendi... na documentação não se utiliza mais a tag "a" dentro do Link.

No começo falar sobre a utilização de bibliotecas e/ou frameworks como o Material UI que utilizo e nele realmente existe alguns componentes estilizado com o nome das tags porém não entendi no que pode influenciar isso.

No caso o que deveria acontecer? Seguindo o exemplo

1 resposta

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.