Nextjsの「Do not add stylesheets using next/head」を直したいっ！
2023年8月4日
表示されたWarningは以下。
Do not add stylesheets using next/head (see <link rel="stylesheet"> tag with href="/css/main.css"). Use Document instead.
warning箇所はstylesheetを読み込んでいる部分ではあるんですが、実際はHeadコンポーネントの書き方が悪いぽい？
修正前
import Head from "next/head";
修正後
ドキュメントを読めって話ですがnext/headではなくnext/documentを使いなさいよってことらしい。
import { Head } from "next/document";
next/headのHeadをnext/documentのHeadに変更したらwarningが消えました👍
next/head | next/document
next/headのHeadは、コンポーネントからHeadを追加するような使い方で、
next/documentのHeadは、ページ表示時のHeadを指定するような使い方が正しいようです。
結果的にdocumentのHeadコンポーネントは、Htmlの子要素にする必要があります。
import { Html, Head } from "next/document";
export default function Root() {
return (
<Html>
<Head>
<link rel="stylesheet" href="/css/main.css" />
</Head>
</Html>
);
}