Menu

アプリケーションでCSSを使用する方法

Next.jsでは、アプリケーションでCSSを使用するための複数の方法が提供されています：

このページでは、これらのアプローチの使用方法についてご案内します。

CSSモジュール

CSSモジュールは、一意のクラス名を生成することでCSSをローカルにスコープします。これにより、異なるファイルで同じクラスを使用しても、衝突を心配する必要がありません。

CSSモジュールを使い始めるには、.module.css拡張子を持つ新しいファイルを作成し、appディレクトリ内の任意のコンポーネントにインポートします：

app/blog/styles.module.css
.blog {
  padding: 24px;
}
app/blog/page.tsx
TypeScript
import styles from './styles.module.css'
 
export default function Page({ children }: { children: React.ReactNode }) {
  return <main className={styles.blog}>{children}</main>
}

グローバルCSS

グローバルCSSを使用して、アプリケーション全体にスタイルを適用できます。

グローバルスタイルを使用するには、例えばapp/global.cssのような新しいCSSファイルを作成します：

app/global.css
body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

ルートレイアウト（app/layout.js）でファイルをインポートして、アプリケーションのすべてのルートにスタイルを適用します：

app/layout.tsx
TypeScript
// これらのスタイルはアプリケーションのすべてのルートに適用されます
import './global.css'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

補足: グローバルスタイルはappディレクトリ内の任意のレイアウト、ページ、またはコンポーネントにインポートできます。ただし、Next.jsはSuspenseと統合するためにReactの組み込みスタイルシートサポートを使用しています。この組み込みサポートは現在、ルート間のナビゲーション時にスタイルシートを削除しません。そのため、_真に_グローバルなCSSにはグローバルスタイルを使用し、スコープされたCSSにはCSSモジュールを使用することをお勧めします。

Tailwind CSS

Tailwind CSSはユーティリティファーストのCSSフレームワークで、Next.jsとシームレスに統合されます。

Tailwindのインストール

Tailwindの使用を開始するには、必要なTailwind CSSパッケージをインストールします：

Terminal
npm install -D tailwindcss @tailwindcss/postcss postcss

Tailwindの設定

プロジェクトのルートにpostcss.config.mjsファイルを作成し、PostCSS設定に@tailwindcss/postcssプラグインを追加します：

postcss.config.mjs
/** @type {import('tailwindcss').Config} */
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

Tailwindの使用

グローバルスタイルシートにTailwindディレクティブを追加します：

app/globals.css
@import 'tailwindcss';

次に、ルートレイアウトでスタイルをインポートします：

app/layout.tsx
TypeScript
import type { Metadata } from 'next'
 
// これらのスタイルはアプリケーションのすべてのルートに適用されます
import './globals.css'
 
export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

最後に、アプリケーションでTailwindのユーティリティクラスを使い始めることができます。

app/page.tsx
TypeScript
export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}

Sass

Next.jsはSassと統合しており、.scssと.sassの両方の拡張子と構文をサポートしています。

また、.module.scssまたは.module.sass拡張子を使用したCSSモジュールによるコンポーネントレベルのSassも使用できます。

Sassのインストール

Sassの使用を開始するには、sassパッケージをインストールします：

Terminal
npm install --save-dev sass

Sassオプションのカスタマイズ

Sassオプションを設定したい場合は、next.config.jsでsassOptionsオプションを使用します。

next.config.ts
TypeScript
import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  sassOptions: {
    additionalData: `$var: red;`,
  },
}
 
export default nextConfig

CSS-in-JS

注意: ランタイムJavaScriptを必要とするCSS-in-JSライブラリは、現在React Server Componentsではサポートされていません。Server ComponentsやStreamingなどの新しいReact機能でCSS-in-JSを使用するには、ライブラリ作者がReactの最新バージョンをサポートする必要があります。

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

以下は現在サポートに取り組んでいます：

Server Componentsのスタイルを設定する場合は、CSSモジュールやTailwind CSSなどのCSSファイルを出力する他のソリューションを使用することをお勧めします。

CSS-in-JSの設定

CSS-in-JSを設定するには、以下が必要です：

  1. レンダリング中にすべてのCSSルールを収集するスタイルレジストリを作成します。
  2. useServerInsertedHTMLフックを使用して、それらを使用する可能性のあるコンテンツの前にルールを挿入します。
  3. 初期サーバーサイドレンダリング中にスタイルレジストリでアプリをラップするクライアントコンポーネントを作成します。

styled-jsx

アプリケーション用にstyled-jsxを設定するには、新しいレジストリを作成します：

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を使用するには、next.config.jsで有効にします：

next.config.ts
TypeScript
import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  compiler: {
    styledComponents: true,
  },
}
 
export default nextConfig

次に、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>
  )
}

外部スタイルシート

外部パッケージから公開されたスタイルシートは、コロケーションされたコンポーネントを含むappディレクトリのどこでもインポートできます：

app/layout.tsx
TypeScript
import 'bootstrap/dist/css/bootstrap.css'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className="container">{children}</body>
    </html>
  )
}

外部スタイルシートは、npmパッケージから直接インポートするか、ダウンロードしてコードベースと共に配置する必要があります。<link rel="stylesheet" />は使用できません。

APIリファレンス

このページで説明されている機能について詳しく知るには、APIリファレンスをお読みください。

sassOptions

Sassコンパイラのオプションを設定します。

Next.jsコンパイラ

RustでSWCを使用して書かれたNext.jsコンパイラは、Next.jsアプリケーションを変換し最小化します。