CSS 模組 (CSS Modules)
範例
Next.js 支援不同類型的樣式表，包括：
CSS 模組
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 和 .module.sass 的檔案啟用。
在生產環境中，所有 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 檔案的順序相匹配。請特別注意導入包含自身 CSS 的 JS 模組；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}>Open Dialog</button>
<Dialog isOpen={showDialog} onDismiss={close}>
<button className="close-button" onClick={close}>
<VisuallyHidden>Close</VisuallyHidden>
<span aria-hidden>×</span>
</button>
<p>Hello there. I am a dialog</p>
</Dialog>
</div>
)
}附加功能
Next.js 包含附加功能以改善添加樣式的撰寫體驗：
- 當使用
next dev本地運行時，本地樣式表（全域或 CSS 模組）將利用 快速刷新 (Fast Refresh) 在保存編輯時立即反映變更。 - 當使用
next build建置生產版本時，CSS 檔案將被捆綁成更少的最小化.css檔案，以減少獲取樣式所需的網路請求數量。 - 如果禁用 JavaScript，樣式仍將在生產建置 (
next start) 中載入。然而，next dev仍需要 JavaScript 以啟用 快速刷新 (Fast Refresh)。