Next.js 筆記 - Styling

基本上 Page Router 與 App Router 兩邊的設定長得差不多，差在 App Router 更有彈性，像是：

• 在 App Router 中，global style 可以在 app 資料夾任意檔案中被引入
• 在 Page Router 中，global style 只有在 pages/_app.js 中被引入

在 Next.js 中支援以下各種不同的方式來做到 styling。

Global CSS

• 最傳統，但如果都用這種方式可能導致 bundle 過大且難管理，建議只放些 base styles

CSS Modules

• Next.js 直接支援 .module.css (或其他預處理副檔名) 來使用
• 在 production build，這些 CSS modules 會自動被 concatenate 成多個 minify 與 code-split 的 .css 檔案，並確保只載入該頁面所需的最小 CSS 檔案
• 一些特性
  • 使用 next dev 進行開發時，能透過 Fast Refresh 的方式 hot reload，無需重整就能即時看到修改
  • 使用 next build 會自動對 CSS minified

Tailwind CSS

• setup 方式單純，可見文件
• 在 Next.js 13.1 後，Tailwind CSS 與 PostCSS 可被 Turbopack 支援

Sass

• Next.js 支援可以從 CSS module 中 export Sass variable (範例)

CSS-in-JS

• 注意
  • 需要在 runtime JavaScript 執行的 CSS-in-JS library，目前在 RSC 中尚不支援
    • memo: 像是之前強勢釋出的 StyleX 或 Linaria 看起來就是讓你能寫 CSS-in-JS 語法，但能在 compile time 就產出 CSS 檔案
  • React 18 中的部分特性如 RSC、streaming、concurrent rendering 需要該 library 支援才能起作用
• 若你想在 RSC 中做 styling，官方推薦使用 CSS Modules、PostCSS、Tailwind CSS

Reference

• Next.js Styling