チャプター9

レイアウトコンポーネント

まず、すべてのページで共有される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で終わる必要があります。

components/layout.js内でこのcontainerクラスを使用するには、以下のことを行う必要があります。

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

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

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

現在https://:3000/posts/first-postにアクセスすると、テキストが中央揃えのコンテナ内に表示されているはずです。

ユニークなクラス名を自動生成する

さて、ブラウザの開発者ツールでHTMLを見てみると、Layoutコンポーネントによってレンダリングされたdivには、layout_container__...のようなクラス名が付けられていることに気づくでしょう。

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

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

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

レイアウトコンポーネント

CSSを追加する

ユニークなクラス名を自動生成する

チャプターを完了しました9