建立 2026-09-16 更新 2026-09-16

樣式設計

Next.js 對樣式不強制單一做法，三種主流方案可以視專案規模混搭使用：全域 CSS 管全站共用樣式、CSS Modules 管單一元件的局部樣式、Tailwind CSS 用 utility class 快速堆疊樣式。這一頁介紹三種做法怎麼用，以及字型最佳化。

全域 CSS

在根 Layout 匯入一份全域樣式表，套用到整個網站：

app/globals.css

body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

app/layout.tsx

import "./globals.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-Hant">
      <body>{children}</body>
    </html>
  );
}

全域 CSS 只能在根 Layout 匯入一次，適合放 CSS Reset、字型、色彩變數這類全站共用的規則；不適合放特定元件的樣式，否則規模一大就容易互相覆蓋、難以維護。

CSS Modules

檔名以 .module.css 結尾的樣式表，class 名稱會在建置時自動加上唯一雜湊值，天生局部作用域，不會跟其他元件的同名 class 衝突：

app/components/Card.module.css

.card {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 1rem;
}

app/components/Card.tsx

import styles from "./Card.module.css";

export default function Card({ children }: { children: React.ReactNode }) {
  return <div className={styles.card}>{children}</div>;
}

CSS Modules 適合團隊已經熟悉寫原生 CSS、又想要元件層級的樣式隔離的專案。

Tailwind CSS

Tailwind 用大量預先定義好的 utility class 直接寫在 JSX 上，不用另外切換檔案：

# 用 create-next-app 建立專案時勾選 Tailwind CSS 即會自動設定好
npx create-next-app@latest my-app

export default function Card({ children }: { children: React.ReactNode }) {
  return (
    <div className="rounded-lg border border-gray-200 p-4 shadow-sm">
      {children}
    </div>
  );
}

Tailwind 的優點是不用一直切換檔案、也不用煩惱命名，樣式跟結構寫在同一個地方；缺點是 JSX 裡 class 會變長，習慣之後大多數團隊反而覺得更容易維護。已存在的專案也可以照 Tailwind 官方 Next.js 安裝指南手動加裝。

字型最佳化

Next.js 內建 next/font，會在建置時自動下載並自我託管字型檔案（包含 Google Fonts），避免瀏覽器另外對外發送請求，同時消除字型載入造成的版面跳動：

app/layout.tsx

import { Noto_Sans_TC } from "next/font/google";

const notoSansTC = Noto_Sans_TC({
  subsets: ["latin"],
  weight: ["400", "700"],
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-Hant" className={notoSansTC.className}>
      <body>{children}</body>
    </html>
  );
}

下一步

畫面做好之後，接著看如何在同一個專案裡寫後端 API，詳見 Route Handlers（API 路由）。

樣式設計

全域 CSS

CSS Modules

Tailwind CSS

字型最佳化

推薦影音

四種樣式寫法一次看懂

下一步