How to style Link component in Next.js

Updated: January 9, 2023 By: Khue 3 comments

In Next.js, <Link> is one of the most-used components. To style it, you can use the className or the style props (in the old days, we had to add a <a> tag inside a <Link>, but now there is no need to do so).

Example:

JSX code:

<Link href="/about" className='my-link'>
   About Us
</Link>

CSS:

.my-link {
  color: orange;
  text-decoration: underline;
}

Another example with inline styles:

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

export default function Home() {
  return (
    <div>
      <div style={{ padding: 30 }}>
        <p>
          <Link
            href='/about'
            style={{
              textDecoration: 'none',
              color: 'red',
              fontSize: 30,
              fontStyle: 'italic',
            }}
          >
            Sling Academy
          </Link>
        </p>
        <p>
          <Link
            href='/contact'
            style={{
              textDecoration: 'underline',
              color: 'blue',
              fontSize: 30,
            }}
          >
            Contact Us
          </Link>
        </p>
      </div>
    </div>
  );
}

Screenshot: