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 文件的额外网络请求，内联能显著改善首次内容绘制 (FCP) 和最大内容绘制 (LCP) 等关键指标。

  • 慢速连接：对于网络较慢的用户，内联 CSS 通过减少网络往返次数可带来明显的性能提升。

  • 原子化 CSS 打包 (如 Tailwind)：对于 Tailwind CSS 这类实用优先框架，页面所需样式大小通常与设计复杂度呈 O(1) 关系。这使得内联成为理想选择，因为当前页面的完整样式集轻量且不会随页面大小增长。内联 Tailwind 样式能确保最小负载，并消除额外网络请求需求，从而进一步提升性能。

不适用场景

虽然内联 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