Next.js adding a css class to Link

Try this (available in NextJS v13):

<Link href="/globalSettings" className="app-subnav__link"> 
    Settings Overview
</Link>

NextJS v12 and older:

<Link href="/globalSettings"> 
    <a className="app-subnav__link">Settings Overview</a>
</Link>

Reference: https://nextjs.org/docs/api-reference/next/link

Update: in NextJS v13 The next/link child can no longer be <a>. Add the legacyBehavior prop to use the legacy behavior or remove the <a> to upgrade. A codemod is available to automatically upgrade your code.

Any apps still using NextJS v12 or older should use the old approach, which was to give the Link an <a> child and style that:

<Link href="/globalSettings"> 
    <a className="app-subnav__link">Settings Overview</a>
</Link>