全局樣式 Global CSS

1. 默認已創建，即 src\app\globals.css，可根據需要修改

2. 默認在全局布局中導入
   src\app\layout.tsx

   import "./globals.css";
   

組件樣式 CSS Modules

1. 新建文件 src\app\test\styles.module.css

   .red {color: red;}
   

2. 導入目標頁面使用
   src\app\test\page.tsx

   import styles from "./styles.module.css";export default function Page() {return <main className={styles.red}>主體內容</main>;
   }
   

最終效果如下：

字體的實現見 https://blog.csdn.net/weixin_41192489/article/details/145625560

CSS 框架 Tailwind CSS

創建項目時，選擇采用 Tailwind CSS 即可自動集成使用

Tailwind CSS 官網為 https://tailwindcss.com/docs/installation/using-vite

Tailwind CSS 實用教程見 https://blog.csdn.net/2401_83384536/article/details/140352836

使用范例

<h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>

CSS 預處理 Sass

1. 安裝 sass

   pnpm i --save-dev sass
   

2. 在目標頁面文件同目錄下創建 scss 文件，如 src\app\test\test.module.scss

   .container {background-color: yellow;h1 {color: red;}
   }
   

3. 頁面中導入使用
   src\app\test\page.tsx

   import styles from "./test.module.scss";export default function Home() {return (<div className={styles.container}><h1>在 Next.js 中使用 Sass!</h1></div>);
   }
   

效果如下

組件中編寫樣式 styled-jsx

Next.js 內置支持 styled-jsx , 但僅適用于客戶端組件

// 客戶端組件
"use client";
export default function Page() {return (<><div><h1>在 Next.js 中使用 Sass!</h1></div><style jsx>{`h1 {color: red;}`}</style></>);
}