Next.js: Enlace como componente con estilo

Tuve el problema exacto al usar una etiqueta a sin un atributo href en Chrome. No tiene el estilo de un enlace y no tiene las características de accesibilidad de los navegadores de un enlace normal. Lo que funcionó fue usar un href vacío en la etiqueta a .

Experimentando esto también.

Para solucionarlo, probablemente sea una mejor idea incluir href por segunda vez en lugar de dejarlo en blanco. Aunque solo sea para la vista previa de la URL del navegador.

Puede pasar un componente a componentes con estilo en lugar de usar una etiqueta
https://github.com/styled-components/styled-components#third-party-components

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

úsalo

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

Gracias @kennylavender , ¡lo intentaré!

@sedubois funcionó? No puede pasar className a un enlace, por lo que no creo que funcione

@luisrudge aún no lo ha intentado, en este momento la solución fue lo suficientemente buena y lo intentaré una vez más para ver si puedo usar styled-jsx directamente...

Si confirma que no funciona, hágamelo saber y puedo reabrir esto.

@sedubois Puedo confirmar que la solución de @kennylavender no funciona. Recomiendo reabrir este problema.

Se puede realizar una solicitud de extracción para permitir que el componente de enlace nextjs admita esto o puede crear su propia versión del componente de enlace nextjs que funciona con componentes con estilo. Sin mirar el código del enlace, parece que no está pasando ningún accesorio al elemento de anclaje.

Puede crear uno propio importando el enrutador nextjs y luego permitir que los componentes con estilo le den estilo al componente https://www.styled-components.com/docs/basics#styling -any-components

Aquí hay un ejemplo rápido, solo escribí este código aquí directamente y no lo he probado, así que utilícelo solo como ejemplo.

// 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;

Buen enfoque @kennylavender , pero no creo que sea lo suficientemente bueno, porque no está representando el atributo href (en su lugar, está usando el evento onClick ). Entonces... ¿Qué tan bueno es este enfoque para SEO? ¿Otras alternativas?

Es solo un ejemplo, deberías llevarlo más lejos. Puede y definitivamente debe agregar un atributo href encima del código que publiqué. Eche un vistazo a cómo se implementa nextjs/link para tener una idea de cómo hacerlo.

Hola chicos. En la versión 3.0.1-beta.13+ , puede establecer passHref en Link (como una propiedad booleana) para exponer su href a styled-components (o cualquier otra biblioteca que envuelva su etiqueta <a/> ).

Usando el primer ejemplo de problema: podría hacerse de esta manera:

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

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

FYI: si está usando next-routes , se vería así:

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

Solución @vjpr mejorada, pasando por alto el accesorio className directamente a nuestro Link para que podamos extender sus estilos en el alcance correcto:

Enlace.js

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

OtroComponente.js

import Link fron 'components/Link';

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

Una versión ligeramente mejorada de @torresandres , diseñando el enlace dentro del componente para que no tengamos que crear un componente con estilo en cada componente al que importamos Link .

Enlace.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>
);

OtroComponente.js

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

¿Hay algún motivo específico por el que className no esté disponible como accesorio para vincular? Me encantaría hacer un PR para agregar eso, pero creo que debe haber una razón por la que eso no está permitido.

¡Encontré la respuesta!
https://github.com/zeit/next.js/pull/1642#issuecomment-292431043

para las personas que quieren cambiar el estilo de Link con componentes con estilo

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

entonces puedes usar así <LinkItem to="/yourComponent">somthing</LinkItem>

Me tomó un tiempo resolver esto, así que escribiré un TLDR 👇

TLDR Agregue passHref a su etiqueta <Link> e incluya los componentes con estilo que desee dentro de ella

Ejemplo práctico
En el componente principal:

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

En el archivo del componente con estilo que define TopbarLink:

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

@ferrucc-io Su ejemplo envuelve el ancla dentro de un ancla. Y también, normalmente, es posible que necesite posicionar el enlace. Lo que trae el problema inicial ya que es el interior al que se le da estilo.