はじめに
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ファイルを作成します。
export default function Layout({ children }) {
return <div className={styles.container}>{children}</div>;
}
CSSを適用したい箇所を<Layout>で囲います
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にする必要があります。
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
}
③ CSS Moduleファイルを読み込んで適用します
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を追加し、下記を記載します
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}
② 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から読み込みます
import "../styles/global.css";
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}
CSSが適用されました
参考にしたもの
- Next.jsのチュートリアル
- 【日本一わかりやすいNext.js入門】#4 画像、メタデータ、そしてCSS