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.
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
import React from 'react';
import Link from 'next/link';
import style from './redButton.module.css';
interface Props {
href: string;
text?: string;
}
const RedButton: React.FC<Props> = ({ href, text }) => {
return (
<Link href={href}>
<a rel="nofollow" className={style.redButton}>
{text}
</a>
</Link>
);
};
export default RedButton;
In this case you have to add rel="", className={} to the <a> tag and not the <Link> from 'next/link'