logoNext.js 繁體中文
文件部落格學習
介紹/構建您的應用程式/樣式設定

樣式設定

Next.js 支援多種設定應用程式樣式的方式，包括：

  • 全域 CSS：使用簡單且對熟悉傳統 CSS 的開發者來說很直觀，但可能導致 CSS 檔案過大，且在應用程式成長時難以管理樣式。
  • CSS 模組：建立局部作用域的 CSS 類別，避免命名衝突並提升可維護性。
  • Tailwind CSS：一個工具優先的 CSS 框架，透過組合工具類別來快速實現自訂設計。
  • Sass：一個熱門的 CSS 預處理器，透過變數、嵌套規則和混入等功能擴展了 CSS 的功能。
  • CSS-in-JS：直接在 JavaScript 元件中嵌入 CSS，實現動態且作用域限定的樣式設定。

透過查閱各自的文件來深入了解每種方法：

CSS 模組 (CSS Modules)

使用 CSS 模組 (CSS Modules) 來為您的 Next.js 應用程式設定樣式。

Tailwind CSS

使用 Tailwind CSS 來為你的 Next.js 應用程式添加樣式。

CSS-in-JS

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

Sass

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

客戶端資料獲取

了解客戶端資料獲取，以及如何使用 SWR —— 一個能處理快取、重新驗證、焦點追蹤、定時重新獲取等功能的 React Hook 資料獲取函式庫。

CSS 模組 (CSS Modules)

使用 CSS 模組 (CSS Modules) 來為您的 Next.js 應用程式設定樣式。