How to style Link component in Next.js

Last updated on May 21, 2022 A Goodman Loading... Post a comment

In Next.js, <Link> components generally go with <a> tags. To style a link, we don’t directly add our CSS class names or inline styles to <Link>. Instead, we do that with the <a> tag.

Example:

<Link href="/about">
   <a className='my-link'>About KindaCode.com</a>
</Link>

Another example with inline styles:

<div style={{ padding: 30 }}>
      <Link href="/contact">
        <a style={{
          textDecoration: 'underline',
          color: 'blue',
          fontSize: 30
        }}>
          Contact Us
        </a>
      </Link>
</div>

Screenshot:

That’s if. Further reading:

You can also check our React topic page and Next.js topic page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

You May Also Like