メインコンテンツまでスキップ

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

Next.jsは、アプリケーションでCSSを使用するためのいくつかの方法を提供しています：

このページでは、これらの各アプローチの使用方法を案内します。

CSS Modules​

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

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

app/blog/styles.module.css
.blog {
  padding: 24px;
}
app/blog/page.tsx
import styles from './styles.module.css'

export default function Page({ children }: { children: React.ReactNode }) {
  return <main className={styles.blog}>{children}</main>
}

グローバルCSS​

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

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

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

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

app/layout.tsx
// これらのスタイルはアプリケーション内のすべてのルートに適用されます
import './global.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Good to know: グローバルスタイルは、appディレクトリ内の任意のレイアウト、ページ、またはコンポーネントにインポートできます。ただし、Next.jsはReactの組み込みのスタイルシートサポートを使用してSuspenseと統合します。この組み込みサポートは、ルート間を移動する際にスタイルシートを削除しません。そのため、本当にグローバルなCSSにはグローバルスタイルを使用し、スコープされたCSSにはCSS Modulesを使用することをお勧めします。

Tailwind CSS​

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

Tailwindのインストール​

Tailwindを使用し始めるには、Tailwind CSSパッケージをインストールし、initコマンドを実行してtailwind.config.jsとpostcss.config.jsファイルを生成します：

Terminal
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Tailwindの設定​

Tailwind設定ファイル内で、Tailwindクラス名を使用するファイルへのパスを追加します：

tailwind.config.ts
import type { Config } from 'tailwindcss'

export default {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    // `src`ディレクトリを使用している場合：
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config

Tailwindの使用​

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

app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

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

app/layout.tsx
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
export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}

Sass​

Next.jsは、.scssおよび.sassの拡張子と構文を使用してSassと統合します。

また、CSS Modulesと.module.scssまたは.module.sass拡張子を使用して、コンポーネントレベルのSassを使用することもできます。

Sassのインストール​

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

Terminal
npm install --save-dev sass

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

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

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

const nextConfig: NextConfig = {
  sassOptions: {
    additionalData: `$var: red;`,
  },
}

export default nextConfig

CSS-in-JS​

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

次のライブラリは、appディレクトリ内のClient Componentsでサポートされています（アルファベット順）：

現在サポートに取り組んでいるのは次のとおりです：

Server Componentsをスタイルする場合は、CSS Modulesや、Tailwind CSSのようにCSSファイルを出力する他のソリューションを使用することをお勧めします。

CSS-in-JSの設定​

CSS-in-JSを設定するには、次の手順を実行します：

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

styled-jsx​

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

app/registry.tsx
'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
}) {
  // 遅延初期状態でスタイルシートを一度だけ作成します
  // x-ref: 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
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
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  compiler: {
    styledComponents: true,
  },
}

export default nextConfig

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

lib/registry.tsx
'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
}) {
  // 遅延初期状態でスタイルシートを一度だけ作成します
  // x-ref: 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
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
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" />を使用することはできません。