Nested Parenthetical Madness

    next-styled-link

    1.1.1 • Public • Published

    next-styled-link

    Next.js Link component to be styled with styled-components

    The problem

    When you style a link with styled component you loose the href="…" meaning that there is no "open in a new tap" and no SEO for indexing links.

    Example:

    const StyledLink = styled.a`
      color: red;
      background: blue;
    `
     
    export default () => (
      <Link prefetch href={'index'}>
        <StyledLink>My styled link</StyledLink>
      </Link>
    )

    In this example above Zeit Next.js Link will not pass the href to the styled-component StyledLink.

    Because in the render function of source of the next/link we found this:

    if (child.type === 'a' && !('href' in child.props)) {

    Styled components are not child.type = a.

    Usage

    const Link = require('next-styled-link');

    Install

    npm i next-styled-link

    DownloadsWeekly Downloads

    2

    Version

    1.1.1

    License

    MIT

    Last publish

    Collaborators

    • brunnolou