logoNext.js 繁體中文
文件部落格學習
介紹/API 參考文檔/配置/next.config.js/inlineCss

inlineCss

使用方式

實驗性支援在 <head> 中嵌入行內 CSS。啟用此標記後，所有原本會生成 <link> 標籤的地方，將改為生成 <style> 標籤。

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    inlineCss: true,
  },
}

export default nextConfig

權衡考量

何時使用行內 CSS

在以下情境中使用行內 CSS 可能帶來益處：

  • 初次訪客：由於 CSS 檔案是渲染阻塞資源，行內嵌入可消除初次訪客下載檔案時的延遲，提升頁面載入效能。

  • 效能指標：透過移除 CSS 檔案的額外網路請求，行內嵌入能顯著改善關鍵指標，如首次內容繪製 (FCP) 和最大內容繪製 (LCP)。

  • 慢速連線：對於網路速度較慢的使用者，每個請求都會增加可觀的延遲，行內 CSS 能減少網路往返次數，帶來明顯的效能提升。

  • 原子化 CSS 套件 (如 Tailwind)：使用像 Tailwind CSS 這類工具優先的框架時，頁面所需的樣式大小通常與設計複雜度呈 O(1) 關係。這使得行內嵌入成為吸引人的選擇，因為當前頁面的完整樣式集輕量且不會隨頁面大小增長。行內嵌入 Tailwind 樣式可確保最小化載荷，並消除額外網路請求的需求，進一步提升效能。

何時不應使用行內 CSS

雖然行內 CSS 對效能有顯著好處，但在以下情境可能不是最佳選擇：

  • 大型 CSS 套件：若您的 CSS 套件過大，行內嵌入可能大幅增加 HTML 體積，導致首字節時間 (TTFB) 變慢，對慢速連線使用者可能造成更差的效能體驗。

  • 動態或頁面專用 CSS：對於樣式高度動態或使用不同 CSS 集的應用程式，行內嵌入可能導致冗餘和膨脹，因為所有頁面的完整 CSS 可能需要重複嵌入。

  • 瀏覽器快取：當訪客頻繁回訪您的網站時，外部 CSS 檔案允許瀏覽器有效快取樣式，減少後續訪問的資料傳輸。行內 CSS 會消除這項優勢。

請仔細評估這些權衡，並考慮結合行內嵌入與其他策略，如關鍵 CSS 提取或混合方法，以根據您的網站需求獲得最佳結果。

須知事項：

此功能目前為實驗性質，並有以下已知限制：

  • CSS 行內嵌入為全域設定，無法按頁面進行配置
  • 樣式在初始頁面載入時會重複出現 — 一次在 SSR 的 <style> 標籤內，一次在 RSC 載荷中
  • 導航至靜態渲染頁面時，樣式將使用 <link> 標籤而非行內 CSS 以避免重複
  • 此功能在開發模式下不可用，僅在正式環境建置中生效

cacheHandler

設定 Next.js 快取用於儲存和重新驗證資料，可搭配任何外部服務如 Redis、Memcached 或其他服務使用。

日誌記錄

設定在開發模式下執行 Next.js 時，如何將資料擷取記錄到控制台。

On this page