nextjs/no-page-custom-font 正确性
它的作用
禁止仅在页面中自定义字体。
为什么这是错误的？
- 你添加的自定义字体是针对某个页面的——这只会将字体应用于特定页面，而不会应用到整个应用程序。
- 你添加的自定义字体位于
pages/_document.js中的独立组件内——这会禁用自动字体优化。
示例
此规则的错误代码示例：
jsx
// pages/index.jsx
import Head from "next/head";
function IndexPage() {
return (
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Krona+One&display=swap"
rel="stylesheet"
/>
</Head>
);
}
export default IndexPage;此规则的正确代码示例：
jsx
// pages/_document.jsx
import NextDocument, { Html, Head } from "next/document";
class Document extends NextDocument {
render() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Krona+One&display=swap"
rel="stylesheet"
/>
</Head>
</Html>
);
}
}
export default Document;如何使用
要通过配置文件或 CLI 启用此规则，可以使用：
json
{
"plugins": ["nextjs"],
"rules": {
"nextjs/no-page-custom-font": "error"
}
}bash
oxlint --deny nextjs/no-page-custom-font --nextjs-plugin