チャプター9

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

まず、すべてのページで共有されるレイアウトコンポーネントを作成しましょう。

トップレベルに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コンポーネントにスタイルを追加しましょう。ここではCSS Modulesを使用します。これにより、ReactコンポーネントにCSSファイルをインポートできます。

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>;
}

ここで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