Pages Router: Layout コンポーネント

まず、すべてのページで共有する Layout コンポーネントを作成しましょう。

トップレベルに components ディレクトリを作成します。
components ディレクトリ内に layout.js ファイルを作成し、以下の内容を記述します:

export default function Layout({ children }) {
  return <div>{children}</div>;
}

次に、pages/posts/first-post.js を開き、Layout コンポーネントをインポートして最外側のコンポーネントとして配置します:

import Head from 'next/head';
import Link from 'next/link';
import Layout from '../../components/layout';
 
export default function FirstPost() {
  return (
    <Layout>
      <Head>
        <title>First Post</title>
      </Head>
      <h1>First Post</h1>
      <h2>
        <Link href="/">← Back to home</Link>
      </h2>
    </Layout>
  );
}

CSS の追加

次に、Layout コンポーネントにスタイルを追加しましょう。これには、React コンポーネント内で CSS ファイルをインポートできる CSS Modules を使用します。

components/layout.module.css ファイルを作成し、以下の内容を記述します:

.container {
  max-width: 36rem;
  padding: 0 1rem;
  margin: 3rem auto 6rem;
}

重要: CSS Modules を使用するには、CSS ファイル名が .module.css で終わる必要があります。

この container クラスを components/layout.js 内で使用するには、以下の手順が必要です:

CSS ファイルをインポートし、styles のような名前を割り当てます
className として styles.container を使用します

components/layout.js を開き、内容を以下のように置き換えます:

import styles from './layout.module.css';
 
export default function Layout({ children }) {
  return <div className={styles.container}>{children}</div>;
}

http://localhost:3000/posts/first-post にアクセスすると、テキストが中央揃えのコンテナ内に表示されるようになります:

ユニークなクラス名の自動生成

ブラウザの開発者ツールで HTML を確認すると、Layout コンポーネントによってレンダリングされた div に layout_container__... のようなクラス名が付いていることがわかります:

これが CSS Modules の機能です: ユニークなクラス名を自動生成します。CSS Modules を使用している限り、クラス名の衝突を心配する必要はありません。

さらに、Next.js のコード分割機能は CSS Modules でも機能します。これにより、各ページに必要な最小限の CSS のみが読み込まれ、バンドルサイズが小さくなります。

CSS Modules はビルド時に JavaScript バンドルから抽出され、Next.js によって自動的に読み込まれる .css ファイルが生成されます。

Layout コンポーネント

CSS の追加

ユニークなクラス名の自動生成

On this page