コンテンツへスキップ

最初のアプリを作成する

検索エンジン最適化

0 ポイント

最初のアプリを作成する

検索エンジン最適化

アセット、メタデータ、CSS

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

まず、すべてのページで共有される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コンポーネントにいくつかのスタイルを追加しましょう。そのためには、CSS Modulesを使用します。これにより、ReactコンポーネントでCSSファイルをインポートできます。

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 Modulesを使用するメリットの1つは何ですか？

送信
前へ次へ