深色模式

Next.js ​

Next.js 是一个基于 React 的全栈框架，提供 App Router 和 Pages Router 两种路由模式。

在这之前，建议首先阅读或了解 Next.js 的 CSS 约定，可参阅官方文档 nextjs.org。

文件扩展名 .js 仅作为示例，有时，它们也会是 .jsx 或 .tsx。

App Router ​

在 app/layout.js 文件中找到或导入一个新的全局 CSS 文件。

js
// 全局 CSS 文件
import "./globals.css";

// 根布局
export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>{children}</body>
        </html>
    );
};

在全局 CSS 文件中 (app/globals.css) 复制字体的 “常规 CSS” 嵌入代码：

css
@import url("https://fontsapi.zeoseven.com/136/main/result.css");

body {
    font-family: "Judou Sans Hans";
    font-weight: normal;
}

/* 使用类选择器 */
.my-class {
    font-family: "Judou Sans Hans";
}

全局 CSS 文件的名称可能与你的 Next.js 项目不同，但它通常在 app/layout.js 文件的顶部，呈现出 import "example.css"; 的样子。

Pages Router ​

在 pages/_app.js 文件找到或导入一个新的全局 CSS 文件。

js
// 全局 CSS 文件
import "../components/globals.css";

// 应用程序
export default function App({ Component, pageProps }) {
    return <Component {...pageProps} />;
};

和 App Router 一样，在全局 CSS 文件中 (components/globals.css) 复制字体的 “常规 CSS” 嵌入代码：

css
@import url("https://fontsapi.zeoseven.com/136/main/result.css");

body {
    font-family: "Judou Sans Hans";
    font-weight: normal;
}

/* 使用类选择器 */
.my-class {
    font-family: "Judou Sans Hans";
}

全局 CSS 文件的名称可能与你的 Next.js 项目不同，但它通常在 pages/_app.js 文件的顶部，呈现出 import "example.css"; 的样子。

CSS Modules ​

虽然目前可以在局部布局或局部组件中直接导入 CSS 文件，但在 Next.js 中，最佳实践应是使用 CSS 模块。

使用 .module.css 扩展名创建 CSS 文件，并导入它。

以 blog.module.css 为例：

js
// app/blog/page.js

import styles from "./blog.module.css";
 
export default function Page() {
    return <div className={styles.blog}>
        <h1>Blog</h1>
    </div>;
};
css
/* app/blog/blog.module.css */

@import url("https://fontsapi.zeoseven.com/136/main/result.css");

.blog { 
    font-family: "Judou Sans Hans";
}

useEffect ​

如果使用可能存在的 高级冗余.js 选项，可以将其复制在 useEffect 中：

jsx
import { useEffect } from "react";

export default function Page() {
    useEffect(() => {

        /* 高级冗余.js 嵌入代码*/

    }, []);

    return <div style={{ fontFamily: "Judou Sans Hans" }}>...</div>;
};