タイトル : Gatsby react-helmetからHead APIへ
更新日 : 2023-10-17
カテゴリ : OS、アプリとか
タグ :
react   
gatsby   

警告メッセージ

以下の警告が出てたので対応しましょう。

warn gatsby-plugin-react-helmet: Gatsby now has built-in support for modifying
the document head. Learn more at https://gatsby.dev/gatsby-head

調査

以下の情報が載っていました。

作業メモ

最初、上記の注意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>
  </>
  )
}