CSS 模組 (CSS Modules)
範例
Next.js 內建支援使用 .module.css 副檔名的 CSS 模組。
CSS 模組透過自動建立唯一的類別名稱來實現 CSS 的本地作用域。這讓您可以在不同檔案中使用相同的類別名稱，而不用擔心衝突。這種特性使 CSS 模組成為包含元件級 CSS 的理想方式。
範例
例如，考慮在 components/ 資料夾中的可重複使用 Button 元件：
首先，建立 components/Button.module.css 並包含以下內容：
/*
您無需擔心 .error {} 會與其他 `.css` 或 `.module.css` 檔案衝突！
*/
.error {
color: white;
background-color: red;
}接著，建立 components/Button.js，導入並使用上述 CSS 檔案：
import styles from './Button.module.css'
export function Button() {
return (
<button
type="button"
// 注意 "error" 類別是作為導入的 `styles` 物件屬性來訪問的
className={styles.error}
>
Destroy
</button>
)
}CSS 模組是一個_可選功能_，且僅對副檔名為 .module.css 的檔案啟用。
常規的 <link> 樣式表和全域 CSS 檔案仍然支援。
在生產環境中，所有 CSS 模組檔案將自動合併為多個經過最小化和程式碼分割的 .css 檔案。
這些 .css 檔案代表您應用程式中的熱門執行路徑，確保為您的應用程式載入最少的 CSS 以完成繪製。
全域樣式
要將樣式表添加到您的應用程式，請在 pages/_app.js 中導入 CSS 檔案。
例如，考慮以下名為 styles.css 的樣式表：
body {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
'Arial', sans-serif;
padding: 20px 20px 60px;
max-width: 680px;
margin: 0 auto;
}如果尚未存在，請建立一個 pages/_app.js 檔案。
然後，導入 styles.css 檔案。
import '../styles.css'
// 這個預設導出在新的 `pages/_app.js` 檔案中是必需的。
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}這些樣式 (styles.css) 將應用於您應用程式中的所有頁面和元件。
由於樣式表的全域性質，以及為了避免衝突，您只能在 pages/_app.js 中導入它們。
在開發環境中，以這種方式表達樣式表可以讓您在編輯時熱重載樣式——這意味著您可以保持應用程式狀態。
在生產環境中，所有 CSS 檔案將自動合併為一個經過最小化的 .css 檔案。CSS 合併的順序將與 CSS 導入到 _app.js 檔案的順序相匹配。請特別注意導入的 JS 模組中包含的 CSS；JS 模組的 CSS 將按照與導入 CSS 檔案相同的排序規則進行合併。例如：
import '../styles.css'
// ErrorBoundary 中的 CSS 依賴於 styles.css 中的全域 CSS，
// 因此我們在 styles.css 之後導入它。
import ErrorBoundary from '../components/ErrorBoundary'
export default function MyApp({ Component, pageProps }) {
return (
<ErrorBoundary>
<Component {...pageProps} />
</ErrorBoundary>
)
}外部樣式表
Next.js 允許您從 JavaScript 檔案導入 CSS 檔案。
這是可能的，因為 Next.js 擴展了 導入 的概念，使其不僅限於 JavaScript。
從 node_modules 導入樣式
自 Next.js 9.5.4 起，允許從 node_modules 導入 CSS 檔案到應用程式的任何位置。
對於全域樣式表，如 bootstrap 或 nprogress，您應該在 pages/_app.js 中導入檔案。
例如：
import 'bootstrap/dist/css/bootstrap.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}對於導入第三方元件所需的 CSS，您可以在元件中進行。例如：
import { useState } from 'react'
import { Dialog } from '@reach/dialog'
import VisuallyHidden from '@reach/visually-hidden'
import '@reach/dialog/styles.css'
function ExampleDialog(props) {
const [showDialog, setShowDialog] = useState(false)
const open = () => setShowDialog(true)
const close = () => setShowDialog(false)
return (
<div>
<button onClick={open}>開啟對話框</button>
<Dialog isOpen={showDialog} onDismiss={close}>
<button className="close-button" onClick={close}>
<VisuallyHidden>關閉</VisuallyHidden>
<span aria-hidden>×</span>
</button>
<p>你好。我是一個對話框</p>
</Dialog>
</div>
)
}附加功能
Next.js 包含附加功能來改善添加樣式的撰寫體驗：
- 在本地使用
next dev運行時，本地樣式表（全域或 CSS 模組）將利用快速刷新 (Fast Refresh)，在保存編輯時立即反映變更。 - 在使用
next build為生產環境構建時，CSS 檔案將被合併為更少的經過最小化的.css檔案，以減少獲取樣式所需的網路請求數量。 - 如果您禁用 JavaScript，在生產構建 (
next start) 中仍會載入樣式。然而，next dev仍需要 JavaScript 來啟用快速刷新 (Fast Refresh)。