Next.jsのフォントを最適化する機能 「next/font」 を解説！

## はじめに

Webサイトを作る時に悩むポイントの一つが**フォント**です。特にGoogle Fontsのような外部フォントを使うと見た目は良くなるものの、次のような問題が起きがちです。。

- ページの表示が遅くなる 😫
- 読み込み途中で文字のレイアウトが崩れる 😱
- 外部サービスに依存するのでプライバシーが心配 🔒

こういった問題を解決するのが、Next.js 13以降で導入された**Font最適化機能 (next/font)** です！

この記事では、next/fontを使うことで得られるメリットと基本的な使い方を紹介します。

## next/fontを使うメリット

next/fontを使うと、こんなメリットが得られます：

1. **ページの表示が速くなる** ⚡
   外部へのリクエストが減り、最適化されたフォントファイルが使われるため、ページの読み込みが高速化します。

2. **レイアウトのガタつきがなくなる** 🧩
   フォントがビルド時に用意されるため、ページ表示後に文字のサイズやレイアウトが変わることがありません。

3. **自動的に最適化される** 🔄
   フォントファイルを最適化し、必要な文字だけを含めるので、データ量が削減されます。

4. **プライバシーが守られる** 🛡️
   Googleなどの外部サービスにユーザー情報が送られることがありません。

5. **ブランディングを損なわない** ✨
   見た目の良い独自フォントを使いながらも、上記のメリットを全て享受できます。

## 基本的な使い方

### Google Fontsを使う

```tsx
// app/layout.tsx
import { Inter } from 'next/font/google';

// フォントを設定
const inter = Inter({
  subsets: ['latin'],  // 使う文字セット
  display: 'swap',     // フォント表示方法
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}
```

たったこれだけで、フォントが最適化されて読み込まれます！

### 独自フォントを使う

```tsx
// app/layout.tsx
import localFont from 'next/font/local';

// 独自フォントを設定
const myFont = localFont({
  src: './my-font.woff2',  // フォントファイルのパス
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja" className={myFont.className}>
      <body>{children}</body>
    </html>
  );
}
```

これだけで独自フォントも最適化されます！

## 複数のフォントを使う方法

複数のフォントを使いたい場合は、次のように設定できます：

```tsx
// app/fonts.ts - フォント定義ファイル
import { Inter, Roboto_Mono } from 'next/font/google';

export const inter = Inter({
  subsets: ['latin'],
});

export const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
});
```

```tsx
// app/page.tsx - コンポーネントでの使用例
import { roboto_mono } from './fonts';

export default function Page() {
  return (
    <h1 className={roboto_mono.className}>
      このテキストはRoboto Monoフォントで表示されます
    </h1>
  );
}
```

## Tailwind CSSと一緒に使う

Tailwind CSSと組み合わせる場合は、CSS変数を使うと便利です

```tsx
// app/layout.tsx
import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',  // CSS変数として設定
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja" className={inter.variable}>
      <body>{children}</body>
    </html>
  );
}
```

```js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)'],
      },
    },
  },
};
```

これで `font-sans` クラスを使うだけで最適化されたフォントが適用されます！

### CSS変数を使う利点

Tailwind CSSとnext/fontをCSS変数で連携させると、以下のようなメリットがあります：

1. **コードの簡潔さ** 🧹
   毎回 `className={inter.className}` と書く代わりに、シンプルに `class="font-sans"` と書くだけでOK！

   ```tsx
   // 毎回フォントを指定する場合
   <h1 className={inter.className}>見出し</h1>
   <p className={inter.className}>段落</p>
   
   // Tailwindを使う場合
   <h1 className="font-sans">見出し</h1>
   <p className="font-sans">段落</p>
   ```

2. **一元管理** 🎯
   フォントを変更したい場合、tailwind.configファイル1箇所の変更だけで済みます。

3. **Tailwindの機能をフル活用** 💪
   レスポンシブデザインやメディアクエリとの併用が簡単です。

   ```tsx
   // 画面サイズによってフォントを切り替える
   <p className="font-sans md:font-serif lg:font-mono">テキスト</p>
   ```

4. **既存のTailwindプロジェクトとの統合** 🔄
   既にTailwindを使っているプロジェクトに、スムーズにnext/fontを導入できます。

実際の使用例は次のとおりです：

```tsx
// ヘッダーコンポーネント
export function Header() {
  return (
    <header className="bg-blue-500 p-4">
      <h1 className="font-sans text-2xl font-bold text-white">
        私のNext.jsブログ
      </h1>
      <nav className="font-sans text-sm text-white">
        <a href="/" className="mr-4 hover:underline">ホーム</a>
        <a href="/about" className="mr-4 hover:underline">About</a>
        <a href="/blog" className="hover:underline">ブログ</a>
      </nav>
    </header>
  );
}
```

このように、next/fontとTailwindを組み合わせると、最適化されたフォントの利点を保ちながら、Tailwindの使いやすさも同時に得られます！

## まとめ

next/fontを使うと、見た目の良いフォントを使いながらも：

- ⚡ ウェブサイトの表示が速くなる
- 🧩 レイアウトのガタつきがなくなる
- 🔄 フォントが自動的に最適化される
- 🛡️ ユーザーのプライバシーが守られる

簡単な設定だけで、これらのメリットを全て得られるのがnext/fontの魅力です。ぜひあなたのNext.jsプロジェクトでも試してみてください！