When utilizing Next.js with TypeScript, you may encounter an error message stating that the property 'className' is not found on the type 'IntrinsicAttributes & IntrinsicClassAttributes'

Question

When utilizing Next.js with TypeScript, you may encounter an error message stating that the property 'className' is not found on the type 'IntrinsicAttributes & IntrinsicClassAttributes'

I recently put together a basic nextjs app using typescript. Here's the link to the example: https://github.com/zeit/next.js/tree/master/examples/with-typescript

However, I encountered an issue where I am unable to add the className attribute to any element. When trying to do so, I receive the following error message: Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>

In addition, I'm also facing a type error for other attributes like 'rel' on the link element.

https://i.stack.imgur.com/QDNdH.png

https://i.stack.imgur.com/pUPml.png

reactjs typescript next.js

Answer 1

Answer №1

Refer to the official NextJS documentation. The Link component in NextJS is not a traditional DOM element, therefore you should assign the className directly to the <a> tag instead of the <Link> component.

A simple example extracted from the documentation:

// 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

Answer 2

Refer to the official NextJS documentation. The Link component in NextJS is not a traditional DOM element, therefore you should assign the className directly to the <a> tag instead of the <Link> component.

A simple example extracted from the documentation:

// 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

Answer 3

Answer №2

import React from 'react';
import Link from 'next/link';
import style from './redButton.module.css';

interface Props {
  href: string;
  text?: string;
}

const RedButtonComponent: React.FC<Props> = ({ href, text }) => {
  return (
    <Link href={href}>
      <a rel="" className={style.redButton}>
        {text}
      </a>
    </Link>
  );
};

export default RedButtonComponent;

To ensure proper styling and behavior, remember to include rel="" and assign a class name with className={} inside the <a> tag rather than in the <Link> component provided by 'next/link'.

Answer 4

import React from 'react';
import Link from 'next/link';
import style from './redButton.module.css';

interface Props {
  href: string;
  text?: string;
}

const RedButtonComponent: React.FC<Props> = ({ href, text }) => {
  return (
    <Link href={href}>
      <a rel="" className={style.redButton}>
        {text}
      </a>
    </Link>
  );
};

export default RedButtonComponent;

To ensure proper styling and behavior, remember to include rel="" and assign a class name with className={} inside the <a> tag rather than in the <Link> component provided by 'next/link'.

When utilizing Next.js with TypeScript, you may encounter an error message stating that the property 'className' is not found on the type 'IntrinsicAttributes & IntrinsicClassAttributes'

Answer №1

Answer №2

Similar questions

Enhance user experience by customizing login functionalities in Meteor using React: Integrate personalized

When it comes to TypeScript, it feels like my interface can accept anything I throw at it, and it struggles to grasp how I've implemented and imported redux-toolkit and styled components

I am trying to showcase the chosen value in the return section, but unfortunately, I am encountering some difficulties in retrieving the data. It seems to be a minor issue that I am struggling

Working with scrollIntoView in useEffect (Encountering an error trying to access 'scrollIntoView' property of null)

Jasmine encountered an error while trying to compare the same string: 'Expected the values to match.'

Tips for modifying an axios instance during response interception

Is there a method to implement retries for inconsistent tests with jest-puppeteer?

Dealing with import and export in React using MaterialUI components

Introducing the concept of type-specific name inclusion

What is the method to store and retrieve data attributes linked to elements such as select options within the React framework?

Testing a React component using the `ua-parser-js` plugin with Jest and React Testing Library

Enhancing React Native experience by dynamically editing array elements

I can't seem to get React Fetch and the expressJS post method to cooperate - what could I be overlooking?

What is the best way to add both the id and the full object to an array list at the

The overload functionality in Typescript interfaces is not functioning as intended

Encountering a 'map' error due to undefined properties when attempting to map over an empty array

Tips for utilizing ngIf based on the value of a variable

Tips for verifying React Router route parameters

Using Next-auth.js: Redirecting from getServerSideProps to a specific callback URL - How can it be done?

I encountered an issue while attempting to build the react-create-library with Material UI