CSS-in-JSライブラリの使用方法

警告: サーバーコンポーネントやストリーミングなどの新しいReact機能とCSS-in-JSを一緒に使用するには、ライブラリ開発者がconcurrent renderingを含む最新バージョンのReactをサポートしている必要があります。

以下のライブラリはappディレクトリのクライアントコンポーネントでサポートされています（アルファベット順）：

以下はサポートに向けて現在作業中です：

emotion

補足: 私たちは様々なCSS-in-JSライブラリをテストしており、React 18の機能やappディレクトリをサポートするライブラリについて、さらに多くの例を追加していく予定です。

サーバーコンポーネントにスタイルを適用したい場合は、CSS Modulesや、PostCSSやTailwind CSSなどのCSSファイルを出力する他のソリューションを使用することをお勧めします。

`app`でCSS-in-JSを設定する

CSS-in-JSの設定は、以下の3つのステップからなるオプトインプロセスです：

レンダリング時にすべてのCSSルールを収集するスタイルレジストリ
それらを使用するコンテンツの前にルールを挿入するための新しいuseServerInsertedHTMLフック
初期サーバーサイドレンダリング中にアプリをスタイルレジストリでラップするクライアントコンポーネント

`styled-jsx`

クライアントコンポーネントでstyled-jsxを使用するには、v5.1.0以上が必要です。まず、新しいレジストリを作成します：

app/registry.tsx

TypeScript

'use client'
 
import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
 
export default function StyledJsxRegistry({
  children,
}: {
  children: React.ReactNode
}) {
  // 遅延初期状態でスタイルシートを一度だけ作成
  // 参考: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
  const [jsxStyleRegistry] = useState(() => createStyleRegistry())
 
  useServerInsertedHTML(() => {
    const styles = jsxStyleRegistry.styles()
    jsxStyleRegistry.flush()
    return <>{styles}</>
  })
 
  return <StyleRegistry registry={jsxStyleRegistry}>{children}</StyleRegistry>
}

次に、ルートレイアウトをレジストリでラップします：

app/layout.tsx

TypeScript

import StyledJsxRegistry from './registry'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <StyledJsxRegistry>{children}</StyledJsxRegistry>
      </body>
    </html>
  )
}

こちらで例を確認できます。

Styled Components

以下はstyled-components@6以降の設定方法の例です：

まず、next.config.jsでstyled-componentsを有効にします。

next.config.js

module.exports = {
  compiler: {
    styledComponents: true,
  },
}

次に、styled-components APIを使用してレンダリング中に生成されたすべてのCSSスタイルルールを収集するグローバルレジストリコンポーネントと、それらのルールを返す関数を作成します。その後、useServerInsertedHTMLフックを使用して、レジストリで収集されたスタイルをルートレイアウトの<head> HTMLタグに挿入します。

lib/registry.tsx

TypeScript

'use client'
 
import React, { useState } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
 
export default function StyledComponentsRegistry({
  children,
}: {
  children: React.ReactNode
}) {
  // 遅延初期状態でスタイルシートを一度だけ作成
  // 参考: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
 
  useServerInsertedHTML(() => {
    const styles = styledComponentsStyleSheet.getStyleElement()
    styledComponentsStyleSheet.instance.clearTag()
    return <>{styles}</>
  })
 
  if (typeof window !== 'undefined') return <>{children}</>
 
  return (
    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
      {children}
    </StyleSheetManager>
  )
}

ルートレイアウトのchildrenをスタイルレジストリコンポーネントでラップします：

app/layout.tsx

TypeScript

import StyledComponentsRegistry from './lib/registry'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
      </body>
    </html>
  )
}

こちらで例を確認できます。

補足:

サーバーレンダリング中、スタイルはグローバルレジストリに抽出され、HTMLの<head>にフラッシュされます。これにより、スタイルルールがそれらを使用する可能性のあるコンテンツの前に配置されることが保証されます。将来的には、スタイルを挿入する場所を決定するために、Reactの今後の機能を使用する可能性があります。

ストリーミング中、各チャンクからのスタイルが収集され、既存のスタイルに追加されます。クライアントサイドのハイドレーションが完了すると、styled-componentsが通常通り引き継ぎ、さらなる動的スタイルを挿入します。

スタイルレジストリ用のクライアントコンポーネントをツリーのトップレベルで特に使用するのは、この方法でCSSルールを抽出する方が効率的だからです。これにより、後続のサーバーレンダリングでスタイルを再生成する必要がなくなり、それらがサーバーコンポーネントのペイロードに送信されるのを防ぎます。

styled-componentsのコンパイルの個々のプロパティを設定する必要がある高度なユースケースでは、Next.js styled-components APIリファレンスで詳細を確認できます。

CSS-in-JSライブラリの使用方法

appでCSS-in-JSを設定する

styled-jsx

Styled Components

`app`でCSS-in-JSを設定する

`styled-jsx`