inlineCss

此功能目前為實驗性質，可能會變更，不建議用於生產環境。試用並在 GitHub 上分享您的意見回饋。

用法

實驗性支援將 CSS 行內嵌在 <head> 中。當啟用此標誌時，所有我們通常產生 <link> 標籤的地方，都會改為產生 <style> 標籤。

next.config.ts

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 以避免重複

此功能在開發模式下不可用，僅在生產版本中有效