【Next.js】WEBフォントを追加する

<HEAD>コンポーネントを使います。

例として、Google FontsのNoto Sans JPを追加するコードについて紹介します。

全ページに追加する
個別ページに追加する
HEADコンポーネント → 2種類ある

全ページに追加する

_document.jsxに書けば、全ページに反映できます。

_document.jsx

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

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

もしくは、_app.jsxに書くこともできます。

_app.jsx

import Head from "next/head";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <link
          href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap"
          rel="stylesheet"
        />
      </Head>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

_document.jsxと_app.jsxの違いについては、以下のページが分かりやすいです。

Next.jsの_appと_document – Qiita

Next.jsの_app.jsと_document.js – Qiita

この場合、どちらに書いても良さそうな気がします。

個別ページに追加する

例えば、index.jsxに追加したい場合は、以下のように書きます。

index.jsx

import Head from "next/head";

const Home = () => {
  return (
    <>
      <Head>
         <link 
           href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap" 
           rel="stylesheet" 
         />
      </Head>
      <h1>ほげ</h1>
    </>
  );
};

export default Home;