アプリケーションでCSSを使用する方法
Next.jsではアプリケーションでCSSを使用するための複数の方法が提供されています：
CSS Modules
CSS Modulesは、一意のクラス名を生成することでCSSをローカルにスコープします。これにより、異なるファイルで同じクラス名を使用しても、名前の衝突を心配する必要がありません。
CSS Modulesを使い始めるには、.module.css拡張子を持つ新しいファイルを作成し、それをappディレクトリ内の任意のコンポーネントにインポートします：
.blog {
padding: 24px;
}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ファイルを作成し、ルートレイアウトにインポートして、アプリケーションのすべてのルートにスタイルを適用します：
body {
padding: 20px 20px 60px;
max-width: 680px;
margin: 0 auto;
}// これらのスタイルはアプリケーションのすべてのルートに適用されます
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 Modulesを使用することをお勧めします。
Tailwind CSS
Tailwind CSSはユーティリティファーストのCSSフレームワークで、Next.jsとシームレスに統合できます。
Tailwindのインストール
Tailwindを使い始めるには、必要なTailwind CSSパッケージをインストールします：
npm install tailwindcss @tailwindcss/postcss postcssTailwindの設定
プロジェクトのルートにpostcss.config.mjsファイルを作成し、PostCSS設定に@tailwindcss/postcssプラグインを追加します：
/** @type {import('tailwindcss').Config} */
export default {
plugins: {
'@tailwindcss/postcss': {},
},
}Tailwindの使用
Tailwindディレクティブをグローバルスタイルシートに追加します：
@import 'tailwindcss';次に、ルートレイアウトでスタイルをインポートします：
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のユーティリティクラスを使用できるようになります。
export default function Page() {
return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}外部スタイルシート
外部パッケージで公開されているスタイルシートは、コロケーションされたコンポーネントを含め、appディレクトリのどこでもインポートできます：
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" />は使用できません。