タイトル : Gatsby react-helmetからHead APIへ
更新日 : 2023-10-17
カテゴリ : プログラミング
警告メッセージ
以下の警告が出てたので対応しましょう。
warn gatsby-plugin-react-helmet: Gatsby now has built-in support for modifying
the document head. Learn more at https://gatsby.dev/gatsby-head調査
以下の情報が載っていました。
-
gatsby-plugin-react-helmetが廃止予定に！ヘッダはAPIを使おう【Gatsby.js】
注意2:コンポーネントには実装できない Gatsby Head APIを使った新しい方法はコンポーネントには実装できない。pagesかtemplateにだけ利用できる。
作業メモ
最初、上記の注意2が理解出来ていなく、つまづきました。
あとは、公式の説明にもあるけど、Head()にプロパティが渡ってくるのでそれを使うことでHelmetでやっていたことを書き換えられました。
抜粋のみ
The Head function receives these properties:
export const Head = ({ location, params, data, pageContext }) => (
<>
<title>{pageContext.title}</title>
<meta name="description" content={data.page.description} />
<meta
name="twitter:url"
content={`https://www.foobar.tld/${location.pathname}`}
/>
</>
)本サイトのsrc/templates/category.js 中のHead()が以下になるだけ。
export const Head = ({ location, params, data, pageContext }) => {
return (
<>
<title>skiss: カテゴリ: {cat2kname[pageContext.category]} のページ</title>
</>
)
}