CSS Modules
Examples
Next.js は、.module.css拡弽子を使用した CSS Modules の組み込みサポートを持っています。
CSS Modules は、ユニークなクラス名を自動的に作成することで、scope CSS をローカルにします。これにより、衝突を心配することなく、異なるファイルで同じクラス名を使用することができます。この振る舞いは、CSS Modules を Component レベルの CSS を含める理想的な方法にしています。
Example
例えば、components/ フォルダ内の再利用可能な Button component を考えてみましょう：
まず、次の内容でcomponents/Button.module.cssを作成してください：
/*
You do not need to worry about .error {} colliding with any other `.css` or
`.module.css` files!
*/
.error {
color: white;
background-color: red;
}
次に、components/Button.jsを作成し、上記の CSS ファイルをインポートして使用します：
import styles from './Button.module.css'
export function Button() {
return (
<button
type="button"
// Note how the "error" class is accessed as a property on the imported
// `styles` object.
className={styles.error}
>
Destroy
</button>
)
}
CSS Modules は、オプション機能であり、.module.css拡張子を持つファイルのみ有効になります。通常の<link>スタイルシートとグローバルな CSS ファイルも引き続きサポートされています。
production では、すべての CSS モジュールファイルが自動的に多くの圧縮され、コード分割された .cssファイルに結合されます。これらの.cssファイルは、あなたのアプリケーションの中で熱い実行 paths を表し、アプリケーションの描画に必要な CSS が最小限になるように保証します。
Global Styles
あなたのアプリケーションにスタイルシートを追加するには、 pages/_app.js 内の CSS ファイルを import してください。
たとえば、次のスタイルシート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'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
これらの styles (styles.css)は、アプリケーション内のすべてのページとコンポーネントに適用されます。スタイルシートのグローバルな性質と、コンフリクトを避けるために、pages/_app.js 内部で** import することのみ可能**です。
development において、このように styles シートを表現することで、styles はあなたがそれらを編集するにつれてホットリロードされることができます。つまり、アプリケーションの状態を維持することができます。
production において、全ての modules ファイルは自動的に一つの最小化された.cssファイルに結合されます。 CSS が結合される順序は、 _app.js ファイルに CSS がインポートされる順序と一致します。JS モジュールが独自の CSS を含むことに特別な注意を払ってください。JS モジュールの CSS は、インポートされた CSS ファイルと同じ順序ルールに従って結合されます。例えば：
import "../styles.css";
// The CSS in ErrorBoundary depends on the global CSS in styles.css,
// so we import it after styles.css.
import ErrorBoundary from "../components/ErrorBoundary";
export default function MyApp({ Component, pageProps }) {
return (
<ErrorBoundary>
<Component {...pageProps} />
</ErrorBoundary>
);
}
External Stylesheets
Next.js は、 JavaScript ファイルから import CSS ファイルを可能にします。これは、 Next.js がimport の概念を JavaScript を超えて拡張しているためです。
node_modulesから Import styles をインポートする
Next.js の 9.5.4 から、node_modulesから CSS ファイルをアプリケーションの任意の場所でインポートすることが許可されています。
グローバルなスタイルシート、例えば bootstrap や nprogress のようなものについては、ファイルを pages/_app.js 内に import するべきです。例えば：
import 'bootstrap/dist/css/bootstrap.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
サードパーティの component が必要とする CSS をインポートするためには、あなたの component でそれを行うことができます。例えば：
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}>Open Dialog</button>
<Dialog isOpen={showDialog} onDismiss={close}>
<button className="close-button" onClick={close}>
<VisuallyHidden>Close</VisuallyHidden>
<span aria-hidden>×</span>
</button>
<p>Hello there. I am a dialog</p>
</Dialog>
</div>
)
}
Additional Features
Next.js は、 styles を追加するための作成体験を改善する追加機能を含んでいます：
next devを使ってローコールで実行する場合、ローカルのスタイルシート(グローバルか CSS modules のいずれか)はFast Refreshを利用して、編集が保存されるとすぐに変更が反映されます。next buildで production の number を行うとき、 CSS ファイルは、より少ない.cssファイルにまとめて縮小され、 styles を取得するために必要なネットワーク要求の数を減らします。- JavaScript を無効にすると、 production build (
next start)でも styles は読み込まれます。しかし、Fast Refreshを有効にするためには、next devでは依然として JavaScript が必要です。