😕

Next.jsにCSS Modulesを適応させる(メタデータ設定も)

2021/01/22に公開

JavaScript

vercel社が提供するNext.js公式チュートリアル引用でございます。まるパクリです。

手順

① Next.jsのプロジェクトのルートにcomponentsフォルダを作成。

$ mkdir components

② ①で作成した/components配下にlayout.jsを作成し以下を記述。

$ touch components/layout.js

layout.js

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

③ pageディレクトリの任意のjsファイル内に以下を記述。

pages配下の任意のjsファイル

〜〜〜
import Layout from "../../components/layout";
〜〜〜

export default function FirstPost() {
  return (
      <Layout>
        〜〜〜
      </Layout>
    );
  }
}

④ プロジェクトのルートにstyleフsォルダを作成し、layout.module.cssを作成。

$ touch components/layout.module.css

⑤ 適応させたいcssを記述。公式チュートリアルでのlayout.module.cssではあらかじめimgやheaderなどのよく使うスタイルを記述していました。このように機能ごとに分けてスタイルを記述しておくのは、cssmodulesではよくあることらしい・・・・。

layout.module.css

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

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.headerImage {
  width: 6rem;
  height: 6rem;
}

.headerHomeImage {
  width: 8rem;
  height: 8rem;
}

.backToHome {
  margin: 3rem 0 0;
}

⑥ components/layout.jsに以下を記述。Headタグ内でtwitterカードなどのメタデータを設定しています。

layout.js

import Head from 'next/head'
import styles from './layout.module.css'
import utilStyles from '../styles/utils.module.css'
import Link from 'next/link'

const name = 'Your Name'
export const siteTitle = 'Next.js Sample Website'

export default function Layout({ children, home }) {
  return (
    <div className={styles.container}>
      <Head>
        <link rel="icon" href="/favicon.ico" />
        <meta
          name="description"
          content="Learn how to build a personal website using Next.js"
        />
        <meta
          property="og:image"
          content={`https://og-image.now.sh/${encodeURI(
            siteTitle
          )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
        />
        <meta name="og:title" content={siteTitle} />
        <meta name="twitter:card" content="summary_large_image" />
      </Head>
      <header className={styles.header}>
        {home ? (
          <>
            <img
              src="/images/profile.jpg"
              className={`${styles.headerHomeImage} ${utilStyles.borderCircle}`}
              alt={name}
            />
            <h1 className={utilStyles.heading2Xl}>{name}</h1>
          </>
        ) : (
          <>
            <Link href="/">
              <a>
                <img
                  src="/images/profile.jpg"
                  className={`${styles.headerImage} ${utilStyles.borderCircle}`}
                  alt={name}
                />
              </a>
            </Link>
            <h2 className={utilStyles.headingLg}>
              <Link href="/">
                <a className={utilStyles.colorInherit}>{name}</a>
              </Link>
            </h2>
          </>
        )}
      </header>
      <main>{children}</main>
      {!home && (
        <div className={styles.backToHome}>
          <Link href="/">
            <a>← Back to home</a>
          </Link>
        </div>
      )}
    </div>
  )
}

⑦ pages/index.jsに以下を記述。Layoutコンポーネントでrender要素を全てラップしています。

pages/index.js

import Head from 'next/head'
import Layout, { siteTitle } from '../components/layout'
import utilStyles from '../styles/utils.module.css'

export default function Home() {
  return (
    <Layout home>
      <Head>
        <title>{siteTitle}</title>
      </Head>
      <section className={utilStyles.headingMd}>
        <p>[Your Self Introduction]</p>
        <p>
          (This is a sample website - you’ll be building a site like this on{' '}
          <a href="https://nextjs.org/learn">our Next.js tutorial</a>.)
        </p>
      </section>
    </Layout>
  )
}

これで、Layoutコンポーネントの持つheaderやmainの要素を受け継ぐことができるはず！
終わり！

手順

Discussion