docs(linter): add good/bad example for nextjs/no-page-custom-font (#12092)

Sysix · Sysix · commit 85ec382b0764 · 2025-07-06T13:14:03.000Z
There is no good example code, because this rule depends on the filename
diff --git a/crates/oxc_linter/src/rules/nextjs/no_page_custom_font.rs b/crates/oxc_linter/src/rules/nextjs/no_page_custom_font.rs
@@ -31,16 +31,46 @@ declare_oxc_lint!(
     /// ### Why is this bad?
     ///
     /// * The custom font you're adding was added to a page - this only adds the font to the specific page and not the entire application.
-    /// * The custom font you're adding was added to a separate component within pages/_document.js - this disables automatic font optimization.
+    /// * The custom font you're adding was added to a separate component within `pages/_document.js` - this disables automatic font optimization.
     ///
     /// ### Examples
     ///
     /// Examples of **incorrect** code for this rule:
-    /// ```javascript
+    /// ```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;
     /// ```
     ///
     /// Examples of **correct** code for this rule:
-    /// ```javascript
+    /// ```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;
     /// ```
     NoPageCustomFont,
     nextjs,
