# はじめに
Next.js(App Router)でメタデータを生成する方法について書いていきます。

# 参考

https://nextjs.org/docs/app/building-your-application/optimizing/metadata

# 静的メタデータの設定方法

https://nextjs.org/docs/app/building-your-application/optimizing/metadata#static-metadata

静的メタデータを設定するには、以下のように書きます。
「metadata」関数をエクスポートする形で定義し、その中で、静的なメタデータを定義できます。

![img](/mosaic-code.jpg)

# 動的メタデータの設定方法

https://nextjs.org/docs/app/building-your-application/optimizing/metadata#dynamic-metadata

例として、ブログの詳細ページなどで、ブログのタイトルをメタデータに設定したい場合などがあります。
その時は、以下のようにすると、動的にメタデータを設定できます。

![img](/mosaic-code.jpg)

このように、「generateMetadata」関数をエクスポートする形で定義、その中でデータの取得、メタデータの設定を行うことができます。

# Faviconを設定

https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons

最後に、Faviconを設定する方法です。
いくつか方法があるみたいですが、今回は「icon.tsx」を設置する方法について書いていきます。
まず、ルートディレクトリにある「page.tsx」と同じ階層に「icon.tsx」を設定し、以下のようにソースを書いていきます。

### **〇設定する項目**
- **runtime**
ランタイム(実行中にコードで使用できるライブラリ、API、および一般的な機能)を設定
- **size**
画像のサイズを設定
- **contentType**
画像の形式を設定
- **Iconメソッド**
ICONを生成するメソッド

![img](/mosaic-code.jpg)


以下の記事に、主な実装例が書いてあります。

https://zenn.dev/ksyunnnn/articles/615679bc316870


# 最後に
他にも色々な記事を書いているので、よければ読んでいってください！

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/2c07c52ff3386d5d75b9

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[cv:issue_marketplace_engineer]

# はじめに
Next.js(App Router)でメタデータを生成する方法について書いていきます。

# 参考

https://nextjs.org/docs/app/building-your-application/optimizing/metadata

# 静的メタデータの設定方法

https://nextjs.org/docs/app/building-your-application/optimizing/metadata#static-metadata

静的メタデータを設定するには、以下のように書きます。
「metadata」関数をエクスポートする形で定義し、その中で、静的なメタデータを定義できます。

``` /app/blog/page.tsx
import { Metadata } from "next";

export const metadata: Metadata = {
  title: "タイトル",
  description: "説明",
};
```

# 動的メタデータの設定方法

https://nextjs.org/docs/app/building-your-application/optimizing/metadata#dynamic-metadata

例として、ブログの詳細ページなどで、ブログのタイトルをメタデータに設定したい場合などがあります。
その時は、以下のようにすると、動的にメタデータを設定できます。

``` /app/blog/[blogId]/page.tsx
import { Metadata } from "next";

export const generateMetadata = async ({ params }: { params: { blogId: string } }): Promise<Metadata> => {
　// ブログの詳細データを取得する関数
  const blogData: ArticleContent = await blodDetailData(params.blogId);

  return {
    title: blogData.title,
    description: blogData.title
  };
}
```

このように、「generateMetadata」関数をエクスポートする形で定義、その中でデータの取得、メタデータの設定を行うことができます。

# Faviconを設定

https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons

最後に、Faviconを設定する方法です。
いくつか方法があるみたいですが、今回は「icon.tsx」を設置する方法について書いていきます。
まず、ルートディレクトリにある「page.tsx」と同じ階層に「icon.tsx」を設定し、以下のようにソースを書いていきます。

### **〇設定する項目**
- **runtime**
ランタイム(実行中にコードで使用できるライブラリ、API、および一般的な機能)を設定
- **size**
画像のサイズを設定
- **contentType**
画像の形式を設定
- **Iconメソッド**
ICONを生成するメソッド

```/app/icon.tsx
import { ImageResponse } from 'next/og'
 
// Route segment config
export const runtime = 'edge'
 
// Image metadata
export const size = {
  width: 32,
  height: 32,
}
export const contentType = 'image/png'
 
// Image generation
export default function Icon() {
  return new ImageResponse(
    (
      // ImageResponse JSX element
      <div
        style={{
          fontSize: 24,
          background: 'black',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
        }}
      >
        A
      </div>
    ),
    // ImageResponse options
    {
      // For convenience, we can re-use the exported icons size metadata
      // config to also set the ImageResponse's width and height.
      ...size,
    }
  )
}
```


以下の記事に、主な実装例が書いてあります。

https://zenn.dev/ksyunnnn/articles/615679bc316870


# 最後に
他にも色々な記事を書いているので、よければ読んでいってください！

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/2c07c52ff3386d5d75b9

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

はじめに

参考

静的メタデータの設定方法

続きを読むには単価診断を受けてください（30秒）