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

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

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

全ページに追加する

_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;

HEADコンポーネント → 2種類ある

上の例で見てもらったら分かるように、HEADコンポーネントには、以下の2種類があります。

  • next/document
  • next/head

 

違いについては以下に書いてました。

Difference between `Head` in `next/document` and `next/head` · Discussion #12290 · vercel/next.js

 

おわり

React
スポンサーリンク
この記事を書いた人
penpen

1991生まれ。
2019年くらいからフロントエンドエンジニアを目指している元アフィリエイターです💩

penpenをフォローする
penpenをフォローする
penpenメモ

コメント

タイトルとURLをコピーしました