inlineCss

使用法

<head>内でのCSSのインライン化に対する実験的なサポートです。このフラグが有効になっている場合、通常は<link>タグを生成する場所に、代わりに生成された<style>タグが配置されます。

TypeScript
JavaScript

next.config.ts
import type { NextConfig } from 'next'

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

export default nextConfig

next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    inlineCss: true,
  },
}

module.exports = nextConfig

トレードオフ

インラインCSSを使用する場合

インラインCSSは、いくつかのシナリオで有益です：

初回訪問者：CSSファイルはレンダーブロックリソースであるため、インライン化により初回訪問者が経験する初期ダウンロードの遅延がなくなり、ページロードのパフォーマンスが向上します
パフォーマンス指標：CSSファイルの追加のネットワークリクエストを削除することで、インライン化はFirst Contentful Paint（FCP）やLargest Contentful Paint（LCP）などの主要な指標を大幅に改善できます
遅い接続：各リクエストがかなりの遅延を追加する遅いネットワークのユーザーにとって、インラインCSSはネットワークの往復を減らすことで顕著なパフォーマンス向上を提供できます
Atomic CSSバンドル（例：Tailwind）：Tailwind CSSのようなユーティリティファーストフレームワークでは、ページに必要なスタイルのサイズはデザインの複雑さに対してO(1)であることが多いです。これにより、現在のページのスタイル全体が軽量で、ページサイズとともに増加しないため、インライン化は魅力的な選択肢となります。Tailwindスタイルをインライン化することで、最小限のペイロードを確保し、追加のネットワークリクエストの必要性を排除し、さらにパフォーマンスを向上させることができます

インラインCSSを使用しない場合

インラインCSSはパフォーマンスに大きな利点をもたらしますが、最適でない場合もあります：

大きなCSSバンドル：CSSバンドルが大きすぎる場合、インライン化するとHTMLのサイズが大幅に増加し、Time to First Byte（TTFB）が遅くなり、遅い接続のユーザーにとってパフォーマンスが悪化する可能性があります
動的またはページ固有のCSS：非常に動的なスタイルや異なるCSSセットを使用するページを持つアプリケーションでは、インライン化により冗長性と膨張が生じ、すべてのページの完全なCSSを繰り返しインライン化する必要があるかもしれません
ブラウザキャッシュ：訪問者が頻繁にサイトに戻る場合、外部CSSファイルはブラウザがスタイルを効率的にキャッシュし、後続の訪問でのデータ転送を削減します。インラインCSSはこの利点を排除します

これらのトレードオフを慎重に評価し、クリティカルCSS抽出やハイブリッドアプローチなど、他の戦略と組み合わせて、サイトのニーズに合わせた最適な結果を目指してください。

Good to know:

この機能は現在実験的であり、いくつかの既知の制限があります：

CSSのインライン化はグローバルに適用され、ページごとに設定することはできません

初期ページロード時にスタイルが重複します - SSR用の<style>タグ内とRSCペイロード内で一度ずつ

静的にレンダリングされたページに移動する際、重複を避けるためにスタイルはインラインCSSではなく<link>タグを使用します

この機能は開発モードでは利用できず、本番ビルドでのみ動作します

使用法​

トレードオフ​

インラインCSSを使用する場合​

インラインCSSを使用しない場合​

使用法

トレードオフ

インラインCSSを使用する場合

インラインCSSを使用しない場合