【ISSUE】[Next.js App Router]メタデータの設定をしよう
2024年12月23日 8:40
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」関数をエクスポートする形で定義、その中でデータの取得、メタデータの設定を行うことができます。
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons
最後に、Faviconを設定する方法です。
いくつか方法があるみたいですが、今回は「icon.tsx」を設置する方法について書いていきます。
まず、ルートディレクトリにある「page.tsx」と同じ階層に「icon.tsx」を設定し、以下のようにソースを書いていきます。
ランタイム(実行中にコードで使用できるライブラリ、API、および一般的な機能)を設定
画像のサイズを設定
画像の形式を設定
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]
診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。