😄
`next-head-count` is missingの直し方
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>
);
};
参考
最後に
間違っていることがあれば、コメントに書いていただけると幸いです。
よろしくお願いいたします。
Discussion