はじめに

Next.jsで画像とメタデータとCSS ModuleとGlobal Stylesを扱うための方法を学習した内容をまとめます。

静的ファイルの扱い

Next.jsの静的ファイルは、publicディレクトリのファイルを参照します。

① publicディレクトリ下に画像を配置します

② publicをルートとしたルートパスで記述します

Powered by <img src="/vercel.svg" alt="Vercel" className="logo" />
<img src="/images/profile.png" alt="Your Name" />

静的画像が表示されました

メタデータの扱い

Next.jsでは、メタデータをページごとに設定できるため、SEO的に強くなります。

① Headコンポーネントをimportします

import Head from "next/head";

② Headコンポーネントでメタデータを記述します。 Headコンポーネントは、<head>タグに変換されます

      <Head>
        <title>タイトル</title>
      </Head>

タイトルを変更することができました

Headコンポーネントでよく使うもの

HTML	説明
`<title>`	サイト・ページタイトル
`<meta description="...">`	サイト・ページの説明
`<meta property="og:..">`	SNSシェア時にサイト・ページ情報を表示するOGPタグ
`<link href="...">`	CSSやCDNの読み込み

CSS Modulesを扱う

CSS Modulesを使うと、クラス名を自動的にユニークに変換してくれます。
CSS Modulesのファイル内で重複がなければ、CSS名が重複する問題を気にせずにコードを書くことができます。

① Layoutコンポーネントでラップします
componentsフォルダを作成し、layout.jsファイルを作成します。

components/layout.js

export default function Layout({ children }) {
  return <div className={styles.container}>{children}</div>;
}

CSSを適用したい箇所を<Layout>で囲います

pages/posts/first-post.js

import Link from "next/link";
import Head from "next/head";
import Layout from "../../components/layout";

export default function FirstPost() {
  return (
    <Layout>
      <Head>
        <title>First Post</title>
      </Head>
      <h1>First Post</h1>
      <h2>
        <Link href="/">
          <a>Back to home</a>
        </Link>
      </h2>
    </Layout>
  );
}

② CSS Moduleファイルを作成
components/layout.module.cssを作成します。
CSS Moduleファイルは、必ず.module.cssにする必要があります。

components/layout.module.css

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

③　CSS Moduleファイルを読み込んで適用します

components/layout.js

import styles from "./layout.module.css";

export default function Layout({ children }) {
  return <div className={styles.container}>{children}</div>;
}

CSSが適用されました

Global Styles

Next.jsでは_app.jsファイルを使うことで、グローバルにCSSを追加することができます。

_app.jsは特殊なファイルでRouteコンポーネントをラップします

①　pagesに_app.jsを追加し、下記を記載します

pages/_app.js

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

② stylesフォルダを作成し、global.cssファイルを作成します

styles/global.css

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,
    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  line-height: 1.6;
  font-size: 18px;
}

* {
  box-sizing: border-box;
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}

③ _app.jsの中でglobal.cssを読み込む
GlobalなCSSは、_app.jsから読み込みます

pages/_app.js

import "../styles/global.css";

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

CSSが適用されました

参考にしたもの

Next.jsのチュートリアル

【日本一わかりやすいNext.js入門】#4 画像、メタデータ、そしてCSS