跳至內容
頁面路由器建構您的應用程式樣式

樣式

範例

Next.js 支援多種 CSS 處理方式，包含

CSS 模組

Next.js 使用 .module.css 副檔名內建支援 CSS 模組。

CSS 模組透過自動建立唯一的類別名稱，將 CSS 的範圍限制在區域內。這讓您可以在不同的檔案中使用相同的類別名稱，而不必擔心衝突。這種特性使 CSS 模組成為包含元件級 CSS 的理想方式。

範例

例如，考慮在 components/ 資料夾中可重複使用的 Button 元件

首先，使用以下內容建立 components/Button.module.css

Button.module.css
/*
You do not need to worry about .error {} colliding with any other `.css` or
`.module.css` files!
*/
.error {
  color: white;
  background-color: red;
}

然後，建立 components/Button.js，導入並使用上述的 CSS 檔案

components/Button.js
import styles from './Button.module.css'
 
export function Button() {
  return (
    <button
      type="button"
      // Note how the "error" class is accessed as a property on the imported
      // `styles` object.
      className={styles.error}
    >
      Destroy
    </button>
  )
}

只有副檔名為 .module.css 和 .module.sass 的檔案才會啟用 CSS 模組。

在正式環境中，所有 CSS 模組檔案都會自動串連成多個經過縮小化和程式碼分割的 .css 檔案。這些 .css 檔案代表應用程式中的熱執行路徑，確保應用程式繪製時載入的 CSS 量最少。

全域樣式

要將樣式表新增到您的應用程式，請在 pages/_app.js 中導入 CSS 檔案。

例如，考慮名為 styles.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 檔案，請建立一個pages/_app.js 檔案。然後，import styles.css 檔案。

pages/_app.js
import '../styles.css'
 
// This default export is required in a new `pages/_app.js` file.
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'
// The CSS in ErrorBoundary depends on the global CSS in styles.css,
// so we import it after styles.css.
import ErrorBoundary from '../components/ErrorBoundary'
 
export default function MyApp({ Component, pageProps }) {
  return (
    <ErrorBoundary>
      <Component {...pageProps} />
    </ErrorBoundary>
  )
}

外部樣式表

Next.js 允許您從 JavaScript 檔案導入 CSS 檔案。這是可行的，因為 Next.js 擴展了 import 的概念，使其超越 JavaScript 的範疇。

從 node_modules 導入樣式

自 Next.js 9.5.4 版本起，允許在應用程式的任何位置從 node_modules 導入 CSS 檔案。

對於全域樣式表，例如 bootstrap 或 nprogress，您應該在 pages/_app.js 檔案內導入。例如：

pages/_app.js
import 'bootstrap/dist/css/bootstrap.css'
 
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

若要導入第三方元件所需的 CSS，您可以在元件中執行此操作。例如：

components/example-dialog.js
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 build 建置生產環境程式碼時，CSS 檔案將會捆綁成更少、經過縮小的 .css 檔案，以減少擷取樣式所需的網路請求數量。
  • 如果您停用 JavaScript，在生產環境建置（next start）中仍然會載入樣式。但是，next dev 仍然需要 JavaScript 才能啟用快速重新整理。

    • CSS 模組

    使用 CSS 模組設定您的 Next.js 應用程式樣式。

    Tailwind CSS

    使用 Tailwind CSS 設定您的 Next.js 應用程式樣式。

    CSS-in-JS

    在 Next.js 中使用 CSS-in-JS 函式庫。

    Sass

    了解如何在您的 Next.js 應用程式中使用 Sass。