nextjs/no-page-custom-font Correctness
它的作用
防止仅在页面中使用自定义字体。
为什么这不好？
- 你添加的自定义字体是添加到某个页面中的——这只会将字体添加到特定页面，而不会作用于整个应用程序。
- 你添加的自定义字体是添加到
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;如何使用
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["nextjs"],
"rules": {
"nextjs/no-page-custom-font": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["nextjs"],
rules: {
"nextjs/no-page-custom-font": "error",
},
});bash
oxlint --deny nextjs/no-page-custom-font --nextjs-plugin版本
此规则是在 v0.3.3 中添加的。