発行:

最適化機能 (Image & Font)

Next.js には、使うだけで Web サイトのパフォーマンス（表示速度）を劇的に向上させる機能が標準で備わっています。
Google の検索順位にも影響する「Core Web Vitals」を改善するためにも、ぜひ活用しましょう。

1. 画像最適化 (next/image)

通常の <img> タグの代わりに <Image> コンポーネントを使います。

何をしてくれるの？

  1. 自動リサイズ : デバイスの画面サイズに合わせて、最適な大きさの画像を配信します（スマホにPC用の巨大画像を送らない）。
  2. フォーマット変換 : WebP や AVIF などの軽量な次世代フォーマットに自動変換します。
  3. 遅延読み込み (Lazy Load) : 画面に見えていない画像は読み込まず、スクロールして近づいたら読み込みます。
  4. レイアウトシフト防止 : 画像のスペースを予め確保し、読み込み後にガクッと画面がズレるのを防ぎます。

使い方

import Image from 'next/image';
import myPic from './profile.jpg'; // ローカル画像

export default function Page() {
  return (
    <div>
      {/* 1. ローカル画像の場合 (サイズ指定不要) */}
      <Image
        src={myPic}
        alt="プロフィール写真"
      />

      {/* 2. 外部画像の場合 (width, height必須) */}
      <Image
        src="https://example.com/hero.jpg"
        alt="ヒーロー画像"
        width={800}
        height={500}
      />
    </div>
  );
}

※ 外部画像を使う場合は、next.config.mjs でドメイン許可の設定が必要です。

2. フォント最適化 (next/font)

Google Fonts などを、ビルド時にダウンロードしてセルフホスティングします。
これにより、 Google への外部リクエストが発生しなくなり、プライバシー保護と高速化 が実現できます。

使い方

next/font/google からフォントをインポートします。

src/app/layout.tsx
import { Inter, Noto_Sans_JP } from 'next/font/google';

// フォントの設定
const inter = Inter({ subsets: ['latin'] });
const notoSansJP = Noto_Sans_JP({
  weight: ['400', '700'],
  subsets: ['latin'],
  preload: true,
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja">
      {/* classNameを適用 */}
      <body className={notoSansJP.className}>{children}</body>
    </html>
  );
}

これだけで、チラつき（Layout Shift）のない高速なフォント表示が可能になります。

まとめ

パフォーマンス対策は、後からやろうとすると大変です。
Next.js なら、最初から <Image> と next/font を使っておくだけで、プロレベルの最適化が完了します。

  • <img> ではなく <Image> を使う。
  • Google Fonts は next/font 経由で読み込む。

これらを習慣にしましょう。