Next.js 添加 css 类到 Link

Question

如何将 css 类添加到Next.js 中的Link 组件？

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

不喜欢上面的！ES Link 抛出错误：

Answer 1

试试这个（在NextJS v13中可用）：

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

NextJS v12 及更早版本：

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

参考： https: //nextjs.org/docs/api-reference/next/link

更新：在 NextJS v13 中，next/link 子项不能再存在<a>。添加该legacyBehavior属性以使用旧行为或删除该属性<a>以进行升级。codemod 可用于自动升级您的代码。

任何仍在使用NextJS v12 或更早版本的应用程序都应该使用旧方法，即为子元素提供Link以下<a>样式：

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

Answer 2

在下一个版本 13 中，您可以直接在 Link 组件中使用它。这里不需要包含 a 标签。