はじめに

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」関数をエクスポートする形で定義し、その中で、静的なメタデータを定義できます。

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

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

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

このように、「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を生成するメソッド

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

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]