Next.js の next/image と next/font の使い方

表示速度の指標で真っ先に問題になるのが画像とフォントです。どちらも「大きなファイルが、必要になる前に、間違ったサイズで読み込まれる」ことで遅くなります。Next.js はこの 2 つに専用の仕組みを持っており、使うだけで大半の問題が消えます。

1next/image が引き受けること

2ローカル画像

プロジェクト直下の public に置いたファイルは、/ 始まりのパスで参照できます。この場合は width と height を自分で書きます。

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="/profile.png"
      alt="著者の写真"
      width={500}
      height={500}
    />
  )
}

ファイルを import すると、ビルド時に実寸が分かるためサイズ指定が不要になります。ぼかしのプレースホルダ用データも自動で用意されます。

import Image from 'next/image'
import ProfileImage from './profile.png'

export default function Page() {
  return (
    <Image
      src={ProfileImage}
      alt="著者の写真"
      placeholder="blur"   // 読み込み中はぼかし表示
    />
  )
}

ファイル名が実行時にしか決まらない場合は、サーバーコンポーネントの中で動的 import() を使えば同じ利点を得られます。ただしパスには固定の前置きが必要で、その配下のファイルはすべてバンドルに含まれる点に注意してください。

3外部サーバーの画像

URL を直接渡す場合、ビルド時にはファイルを読めないため width と height が必須です。親要素いっぱいに広げたい場合は fill を使います。

加えて、配信元を明示的に許可する必要があります。任意の URL を最適化できてしまうと、自分のサーバーが第三者の画像変換に使われてしまうためです。

// next.config.ts
import type { NextConfig } from 'next'

const config: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
        search: '',
      },
    ],
  },
}

export default config

ホスト名だけで広く開けるのではなく、pathname まで絞るのが推奨です。なお、以前使われていた images.domains は非推奨になりました。remotePatterns に置き換えてください。

4バージョン 16 で変わった既定値

画像まわりは既定値の変更が多く、古い記事のまま設定すると挙動が変わります。

とくに quality を 90 などで指定していた場合、警告なく 75 に丸められます。意図した画質が必要なら、設定側で許可する値を列挙してください。

// next.config.ts
const config = {
  images: {
    qualities: [50, 75, 100],
  },
}

5フォントの自前配信

next/font は、指定したフォントをビルド時に取り込み、自サイトから配信します。ブラウザから Google のサーバーへリクエストが飛ばないため、表示の安定とプライバシーの両面で有利です。

// app/layout.tsx
import { Geist } from 'next/font/google'

const geist = Geist({
  subsets: ['latin'],
})

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja" className={geist.className}>
      <body>{children}</body>
    </html>
  )
}

フォントは使ったコンポーネントの範囲に効きます。サイト全体に適用したい場合はルートレイアウトで指定します。

可変フォント（バリアブルフォント）が使える場合はそちらが推奨されます。太さごとにファイルを持たずに済むためです。可変フォントでない場合は weight の指定が必要になります。

import { Roboto } from 'next/font/google'

const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
})

6ローカルのフォントファイル

手元の woff2 を使う場合は next/font/local です。パスは、その関数を呼び出しているファイルからの相対で解決されます。

import localFont from 'next/font/local'

const myFont = localFont({
  src: './my-font.woff2',
})

同じ書体で太さや斜体を使い分けるなら、配列で渡します。

const roboto = localFont({
  src: [
    { path: './Roboto-Regular.woff2', weight: '400', style: 'normal' },
    { path: './Roboto-Italic.woff2', weight: '400', style: 'italic' },
    { path: './Roboto-Bold.woff2', weight: '700', style: 'normal' },
  ],
})

7つまずきやすいところ

• 外部画像が表示されない：remotePatterns に登録されていません。エラーメッセージにホスト名が出ます。
• width / height が必須と怒られる：外部 URL では自動判定できません。fill を使う場合は親要素に位置指定が必要です。
• 画質が変わった：バージョン 16 の qualities 既定値によって丸められています。
• alt を空にする：装飾目的なら空文字が正解ですが、内容を伝える画像には必ず説明を入れます。
• 日本語フォントを丸ごと読み込む：欧文と違い、日本語のフォントはファイルが大きくなります。本文に使う場合はサブセット化や、システムフォントとの併用を検討してください。

アプリの中身が仕上がったら、最後は本番環境へ出す工程です。