Next.js: Link como componente estilizado

Eu tive o problema exato ao usar uma tag a sem um atributo href no Chrome. Ele não é estilizado como um link e não possui os recursos de acessibilidade de um link comum para navegadores. O que funcionou foi usar um href vazio na tag a .

Experimentando isso também.

Para a solução alternativa Provavelmente é uma ideia melhor incluir o href uma segunda vez em vez de em branco. Se apenas para a visualização do URL do navegador.

Você pode passar um componente para styledcomponents em vez de usar uma tag
https://github.com/styled-components/styled-components#third -party-components

import Link from 'next/link'
const StyledLink = styled(Link)`
  color: red;
  background: blue;
`

Use-o

export default () => (<div><StyledLink href="mylink">MyText</StyledLink></div>)

Obrigado @kennylavender , vou tentar isso!

@sedubois funcionou? Você não pode passar className para um Link, então não acho que funcione

@luisrudge ainda não tentei, agora a solução alternativa foi boa o suficiente e vou tentar mais uma vez para ver se posso usar styled-jsx diretamente ...

Se você confirmar que não funciona, me avise e pode reabrir isso.

@sedubois Posso confirmar que a solução do @kennylavender não funciona. Eu recomendo reabrir este problema.

Um Pull Request pode ser feito para permitir que o componente nextjs Link suporte isso ou você pode criar sua própria versão nextjs Link Component que funciona com styledcomponents. Sem olhar para o código do link, parece que não está passando nenhum adereço para o elemento âncora.

Você pode criar o seu próprio importando o roteador nextjs e, em seguida, permitir que styledcomponents estilize o componente https://www.styled-components.com/docs/basics#styling -any-components

Aqui está um exemplo rápido, eu só escrevi este código aqui diretamente e não testei, então use-o apenas como exemplo.

// my-app-link.js
import React from 'react'
import PropTypes from 'prop-types' // Import this from react if your using an older version.
import Router from 'next/router'

const handler = (href) => Router.push(href);

const Link = ({className, children, href, ...rest}={}) => (
  <a onClick={() => handler(href)} className={className} {...rest} >{children}</a>
);

Link.propTypes = {
  className: PropTypes.string,
  href: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.string,
  ]),
  children: PropTypes.node,
}

export default Link;

Boa abordagem @kennylavender , mas não acho que seja bom o suficiente, porque você não está renderizando o atributo href (você está usando o evento onClick ). Então... Quão boa é essa abordagem para SEO? Outras alternativas?

É apenas um exemplo, você deve ir mais longe. Você pode e definitivamente deve adicionar um atributo href em cima do código que postei. Dê uma olhada em como o nextjs/link é implementado para ter uma ideia de como fazer isso.

Ei pessoal. Na versão 3.0.1-beta.13+ , você pode definir passHref para Link (como uma propriedade booleana) para expor seu href para styled-components (ou qualquer outra biblioteca que envolva seu etiqueta <a/> ).

Usando o primeiro exemplo de problema: poderia ser feito desta maneira:

const StyledLink = styled.a`
  color: red;
  background: blue;
`

export default ({ href, name }) => (
  <Link prefetch href={href} passHref>
    <StyledLink>{name}</StyledLink>
  </Link>
)

FYI: Se você estiver usando next-routes , ficaria assim:

export default ({route, params, children}) => (
  <Link route={route} params={params} passHref>
    <StyledLink>{children}</StyledLink>
  </Link>
)

Solução @vjpr aprimorada, ignorando o prop className diretamente para nosso Link para que possamos estender seus estilos no escopo correto:

Link.js

export default ({ route, params, children, className }) => (
  <Link route={route} params={params} passHref>
    <StyledLink className={className}>{children}</StyledLink>
  </Link>
)

OutroComponent.js

import Link fron 'components/Link';

const RedLink = styled(Link)`
  background-color: red;
`

Uma versão ligeiramente melhorada de @torresandres , estilizando o link dentro do componente para que não tenhamos que criar um componente com estilo em cada componente para o qual importamos Link .

Link.js

const StyledLink = styled.a`
  //styles
`
export default ({ route, params, href, children, className }) => (
  <Link route={route} params={params} href={href} passHref>
    <StyledLink className={className}>{children}</StyledLink>
  </Link>
);

OutroComponent.js

<Link href="/">Login</Link>

Existe alguma razão específica pela qual className não está disponível como um acessório para o Link? Eu adoraria fazer um PR para acrescentar isso, mas acho que deve haver uma razão pela qual isso não é permitido.

Encontrei a resposta!
https://github.com/zeit/next.js/pull/1642#issuecomment -292431043

para as pessoas que desejam alterar o estilo do Link com componentes estilizados

const LinkItem = styled(Link)`
// your style
`;

então você pode usar assim <LinkItem to="/yourComponent">somthing</LinkItem>

Levei algum tempo para descobrir isso, então vou escrever um TLDR 👇

TLDR Adicione passHref à sua tag <Link> e inclua os componentes estilizados que você deseja dentro dela

Exemplo Prático
No componente pai:

<Link href="/login" passHref>
          <TopbarLink>Login</TopbarLink>
</Link>

No arquivo de componente estilizado que define o TopbarLink:

export const TopbarLink = styled.a`
// your style
`;

@ferrucc-io Seu exemplo envolve a âncora em uma âncora. E também normalmente você pode precisar posicionar o Link. O que traz o problema inicial como o interno que é estilizado.