nextjs- typescript- Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes

Question

I've created basic nextjs app using typescript link - https://github.com/zeit/next.js/tree/master/examples/with-typescript

I can not add className attribute to any element.I am getting below error. Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>

I am getting type error for other attributes also like rel on link element.

Answer 1

See the NextJS docs. The Link isn't a DOM-element, so you need to add className directly to the <a> tag, but not to the <Link>.

The basic example from the docs:

// pages/index.js
import Link from 'next/link'

function Home() {
  return (
    <>
      <ul>
        <li>Home</li>
        <li>
          <Link href="/about">
            <a>About Us</a>
          </Link>
        </li>
      </ul>
    </>
  )
}

export default Home