CSS
例
Next.jsは、以下を含む複数のCSS処理方法をサポートしています:
CSS Modules
Next.jsは、.module.css
拡張子を使用するCSS Modulesに組み込みでサポートしています。
CSS Modulesは、自動的に一意のクラス名を作成することで、CSSをローカルにスコープ化します。これにより、他のファイルで同じクラス名を使用する際に、名前の衝突を心配することなく使用できます。この動作により、CSS ModulesはコンポーネントレベルのCSSを含めるのに最適な方法となります。
例
例えば、components/
フォルダーにある再利用可能なButton
コンポーネントを考えてみましょう:
まず、components/Button.module.css
を以下の内容で作成します:
/*
他の`.css`や`.module.css`ファイルの`.error {}`と衝突することを心配する必要はありません!
*/
.error {
color: white;
background-color: red;
}
次に、上記のCSSファイルをインポートして使用するcomponents/Button.js
を作成します:
import styles from './Button.module.css'
export function Button() {
return (
<button
type="button"
// インポートされた`styles`オブジェクトのプロパティとして「error」クラスにアクセスしていることに注意してください。
className={styles.error}
>
Destroy
</button>
)
}
CSS Modulesは、.module.css
と.module.sass
拡張子を持つファイルでのみ有効です。
本番環境では、すべてのCSS Moduleファイルは自動的に連結され、多くの縮小され、コード分割された .css
ファイルになります。
これらの.css
ファイルは、アプリケーションのホットな実行パスを表し、アプリケーションを描画するために必要な最小限のCSSが読み込まれることを保証します。
グローバルスタイル
アプリケーションにスタイルシートを追加するには、pages/_app.js
内でCSSファイルをインポートします。
例えば、styles.css
という名前の次のスタイルシートを考えてみましょう:
body {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
'Arial', sans-serif;
padding: 20px 20px 60px;
max-width: 680px;
margin: 0 auto;
}
まだ存在しない場合は、pages/_app.js
ファイルを作成します。
次に、styles.css
ファイルをimport
します。
import '../styles.css'
// この既定のエクスポートは、新しい`pages/_app.js`ファイルで必要です。
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
これらのスタイル(styles.css
)は、アプリケーション内のすべてのページとコンポーネントに適用されます。
スタイルシートのグローバルな性質と競合を避けるため、pages/_app.js
内でのみインポートできます。
開発中、この方法でスタイルシートを表現することで、編集時にスタイルをホットリロードできます。アプリケーションの状態を維持できます。
本番環境では、すべてのCSSファイルは自動的に1つの縮小された.css
ファイルに連結されます。CSSの連結順序は、_app.js
ファイルにCSSをインポートする順序に一致します。独自のCSSを含むJSモジュールにも特に注意してください。JSモジュールのCSSは、インポートされたCSSファイルと同じ順序付けルールに従って連結されます。例:
import '../styles.css'
// ErrorBoundaryのCSSは、styles.cssのグローバルCSSに依存しているため、
// styles.cssの後にインポートします。
import ErrorBoundary from '../components/ErrorBoundary'
export default function MyApp({ Component, pageProps }) {
return (
<ErrorBoundary>
<Component {...pageProps} />
</ErrorBoundary>
)
}
外部スタイルシート
Next.jsでは、JavaScriptファイルからCSSファイルをインポートできます。
これが可能なのは、Next.jsがimport
の概念をJavaScriptを超えて拡張しているためです。
node_modules
からスタイルをインポート
Next.js 9.5.4以降、node_modules
からCSSファイルをインポートすることがアプリケーション内のどこでも許可されています。
bootstrap
やnprogress
などのグローバルスタイルシートの場合、pages/_app.js
内でファイルをインポートする必要があります。例:
import 'bootstrap/dist/css/bootstrap.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
サードパーティコンポーネントに必要なCSSをインポートする場合、コンポーネント内でインポートできます。例:
import { useState } from 'react'
import { Dialog } from '@reach/dialog'
import VisuallyHidden from '@reach/visually-hidden'
import '@reach/dialog/styles.css'
function ExampleDialog(props) {
const [showDialog, setShowDialog] = useState(false)
const open = () => setShowDialog(true)
const close = () => setShowDialog(false)
return (
<div>
<button onClick={open}>ダイアログを開く</button>
<Dialog isOpen={showDialog} onDismiss={close}>
<button className="close-button" onClick={close}>
<VisuallyHidden>閉じる</VisuallyHidden>
<span aria-hidden>×</span>
</button>
<p>こんにちは。私はダイアログです。</p>
</Dialog>
</div>
)
}
追加機能
Next.jsには、スタイル追加の作成体験を向上させるための追加機能が含まれています:
next dev
でローカル実行する際、ローカルスタイルシート(グローバルまたはCSSモジュール)はFast Refreshを活用し、編集を保存するとすぐに変更が反映されます。next build
で本番向けにビルドする際、CSSファイルは少数の最小化された.css
ファイルにバンドルされ、スタイル取得に必要なネットワークリクエストの数を削減します。- JavaScriptを無効にしても、本番ビルド(
next start
)では、スタイルは引き続きロードされます。ただし、Fast Refreshを有効にするにはnext dev
にJavaScriptが必要です。