跳至內容
應用程式路由器建置您的應用程式樣式

CSS

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

CSS 模組

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

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

範例
app/dashboard/layout.tsx
import styles from './styles.module.css'
 
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <section className={styles.dashboard}>{children}</section>
}

app/dashboard/styles.module.css
.dashboard {
  padding: 24px;
}

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

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

全域樣式

全域樣式可以匯入 app 目錄中的任何佈局、頁面或元件。

注意事項:

  • 這與 pages 目錄不同，在 pages 目錄中，您只能在 _app.js 檔案內匯入全域樣式。
  • 除非全域樣式真正是全域的，也就是可以套用至所有頁面且在應用程式的整個生命週期中都存在，否則 Next.js 不支援使用全域樣式。這是因為 Next.js 使用 React 內建的樣式表支援來與 Suspense 整合。目前，此內建支援在您於不同路由之間導覽時不會移除樣式表。因此，我們建議使用 CSS 模組而非全域樣式。

例如，考慮一個名為 app/global.css 的樣式表

app/global.css
body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

在根佈局 (app/layout.js) 中，匯入 global.css 樣式表以將樣式套用至應用程式中的每個路由

app/layout.tsx
// These styles apply to every route in the application
import './global.css'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

外部樣式表

由外部套件發佈的樣式表可以匯入 app 目錄中的任何位置，包括並列元件

app/layout.tsx
import 'bootstrap/dist/css/bootstrap.css'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className="container">{children}</body>
    </html>
  )
}

注意事項：外部樣式表必須直接從 npm 套件匯入，或下載並與您的程式碼庫並列放置。您不能使用 <link rel="stylesheet" />。

排序和合併
base-button.tsx
import styles from './base-button.module.css'
 
export function BaseButton() {
  return <button className={styles.primary} />
}

page.ts
import { BaseButton } from './base-button'
import styles from './page.module.css'
 
export function Page() {
  return <BaseButton className={styles.primary} />
}

為了維持可預測的順序，我們建議以下做法

注意事項

額外功能

Next.js 包含一些額外功能，可改善新增樣式的撰寫體驗