External Post

next.jsとstyled-componentsを組み合わせたときはlinkにpassHrefを渡す

next.jsで<a>タグ以外を<Link>でそのまま囲うとうまくいかない。
ので、passHrefを渡す。

import Link from "next/link"

const RedLink = styled("a")`
  color: red;
`

export const MyLink = ({ href, children, ...props }) => (
  // passHrefを与える
  <Link href={href} passHref>
    <LinkTag {...props}>{children}</LinkTag>
  </Link>
)

https://nextjs.org/docs/#routing

この記事の修正をする