Next.jsでLinkコンポーネントにクラス名(class)を追加する方法

Next.jsではLinkコンポーネントに直接 `className` などの属性を追加しても反映されません。

そのため、Linkコンポーネントの中にaタグを追加し、このaタグに対して `className` などの属性を追加します。

例えば、class属性 “test-class” 、target属性 “_blank”, rel属性 “noopener noreferrer” を追加したい場合、次のように記載します。

import Link from 'next/link'

export default function LinkClassnameExample() {
  return (
    <Link href="/">
      <a className="test-class" target="_blank" rel="noopener noreferrer">
        Next.js TEST
      </a>
    </Link>
  )
}

コメント

タイトルとURLをコピーしました