Zenn
😄

`next-head-count` is missingの直し方

2024/06/21に公開
Next.js
tech

next-head-count is missingの直し方

pages routerを使用しているときに、このエラーが発生したのでメモする。

next-head-count is missingというエラーが発生し、titleやmeta系タグがbodyタグ内に生成されていた。

エラーが発生したコードは以下の通り。

import Head from "next/head";

export interface Props {
  lang: string;
  title: string;
  description?: string;
  url?: string;
}

export const SEO = (props: Props) => {
  const { lang, title, description, } = props;

  return (
    <Head>
      <html lang={lang} />
      <title>{title}</title>
      <meta name="description" content={description} />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta name="robots" content="noindex, nofollow" />
    </Head>
  );
};

解決策

公式ドキュメントを見ていたら、No html or body tagsというセクションがあり、読んでいると、html、bodyタグをHead内で使用することはできないと書いてあった。なので修正コードとしては以下のようになる。
エラーが発生したコードは以下の通り。

 import Head from "next/head";

 export interface Props {
-  lang: string;
   title: string;
   description?: string;
   url?: string;
 }

 export const SEO = (props: Props) => {
-  const { lang, title, description, } = props;
+  const { title, description, } = props;

   return (
     <Head>
-      <html lang={lang} />
       <title>{title}</title>
       <meta name="description" content={description} />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <meta name="robots" content="noindex, nofollow" />
     </Head>
   );
 };

参考

最後に

間違っていることがあれば、コメントに書いていただけると幸いです。
よろしくお願いいたします。

GitHubで編集を提案

Discussion