Next.js link タグで stylesheet を追加するときは next/document を使う

タイトルのままです。
ドキュメントにもあるけど、Next.js (v13) を使って開発をしているときにサードパーティのライブラリだったり typekit だったり css を <link> タグを使って読み込ませるときは next/document の <Head> 内で読み込ませましょうってメモ

🙅 `next/head` の `<Head>` 内で `<link rel="stylesheet">` で CSS を読み込ませると warning が発生する

import Head from 'next/head';

export const SiteHead: FC = () => {
  return (
    <Head>
      <link rel="stylesheet" href="path/to/your/stylesheet.css" />
    </Head>
  );
};

head を共通化しようとして上記のように next/head の <Head> 内に stylesheet の読み込みを書くと次のような警告が発生する
Do not add stylesheets using next/head (see <link rel="stylesheet"> tag with href="https://use.typekit.net/mhd5rrk.css"). Use Document instead.

A <link rel="stylesheet"> tag was added using the next/head component.
We don't recommend this pattern because it will potentially break when used with Suspense and/or streaming. In these contexts, next/head tags aren't:

guaranteed to be included in the initial SSR response, so loading could be delayed until client-side rendering, regressing performance.

loaded in any particular order. The order that the app's Suspense boundaries resolve will determine the loading order of your stylesheets.

cf. No Stylesheets In Head Component | Next.js

英語ちからが無さすぎて翻訳しても良く分からなかったけど、ざっくりな理解だけど next/head の <Head> 内に <link rel="stylesheet"> を追加すると

SSR できるか分からないので、SSR でない場合はコンポーネントのレンダリングの際に head に CSS の読み込みが追加されるのでパフォーマンスが低下する可能性がある
コンポーネントがレンダリングされる際に head 内を書き換えるものだから CSS の読み込み順が担保されないので style が壊れる可能性がある

という事なんじゃないだろうか。

🙆 `<link rel="stylesheet">` は `next/document` の `<Head>` で読み込ませる

/src/pages/_document.tsx

import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html>
      <Head>
        <link rel="stylesheet" href="path/to/your/stylesheet.css" /> {/* ここで CSS を追加する */}
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

CSS に限らず static な meta 情報は next/document の <Head> 内に書くほうがパフォーマンス良さそう。
<Head> が next/document と next/head と 2つ存在するので紛らわしい…
全然関係ないけど、英語ちから&エンジニアリングちからが無さすぎてドキュメント読んでも翻訳しても意味分からんってこと多くてつらい。。。何から勉強すればいいの!?

おわり₍ ᐢ. ̫ .ᐢ ₎

[参考]