Next.jsで画像とメタデータとCSS ModuleとGlobal Stylesを扱う

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

https://nextjs.org/learn/basics/assets-metadata-css

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

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

![スクリーンショット 2022-09-26 18.16.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/01c76244-4649-fb36-2151-bffd09802e24.png)

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

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

静的画像が表示されました
![スクリーンショット 2022-09-26 18.16.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/b7055716-7f9c-9dec-7eea-07a37267daaa.png)

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

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

```javascript
import Head from "next/head";
```

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

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

タイトルを変更することができました
![スクリーンショット 2022-09-26 18.50.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/146a7198-7504-6010-c6e1-f98149b2636e.png)



### Headコンポーネントでよく使うもの
|  HTML  |  説明  |
| ---- | ---- |
|  ```<title>```  |  サイト・ページタイトル  |
|  ```<meta description="...">``` |  サイト・ページの説明  |
|  ```<meta property="og:..">```  |  SNSシェア時にサイト・ページ情報を表示するOGPタグ  |
|  ```<link href="...">```  |  CSSやCDNの読み込み  |


https://nextjs.org/learn/basics/assets-metadata-css/metadata

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

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

![スクリーンショット 2022-09-26 19.06.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/c9ddcfc8-58e9-02a0-23ef-54b0b42dd532.png)

```js:components/layout.js
export default function Layout({ children }) {
  return <div className={styles.container}>{children}</div>;
}
```
CSSを適用したい箇所を```<Layout>```で囲います

```html: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```にする必要があります。

```css:components/layout.module.css
.container {
  max-width: 36rem;
  padding: 0 1rem;
  margin: 3rem auto 6rem;
}
```

③　CSS Moduleファイルを読み込んで適用します
```js:components/layout.js
import styles from "./layout.module.css";

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

CSSが適用されました
![スクリーンショット 2022-09-26 19.14.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/20ec63e3-8175-d5cd-0a5d-6489d447acc3.png)

https://nextjs.org/learn/basics/assets-metadata-css/css-styling

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

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

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

```js:pages/_app.js
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}
```

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


```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から読み込みます

```js:pages/_app.js
import "../styles/global.css";

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

CSSが適用されました
![スクリーンショット 2022-09-26 19.30.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/4eef1921-563d-7519-12e6-5efee06a7460.png)

# 参考にしたもの
* Next.jsのチュートリアル

https://nextjs.org/learn/basics/assets-metadata-css

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

https://www.youtube.com/watch?v=D-q8K7TCN6I&t=489s