画像とフォントの最適化方法

Next.jsには、画像とフォントの自動最適化機能が備わっています。このページでは、それらの使用方法について説明します。

画像の最適化

Next.jsの<Image>コンポーネントは、HTMLの<img>要素を拡張し、以下の機能を提供します。

サイズ最適化: 各デバイスに適切なサイズの画像を自動的に配信し、WebPなどの最新画像フォーマットを使用します。
視覚的安定性: 画像の読み込み時に、レイアウトシフトを自動的に防止します。
ページ読み込みの高速化: ネイティブブラウザの遅延読み込みを使用し、オプションでぼかしアップのプレースホルダーを付けて、画像がビューポートに入ったときのみ読み込みます。
アセットの柔軟性: リモートサーバーに保存されている画像でも、オンデマンドで画像をリサイズできます。

<Image>の使用を開始するには、next/imageからインポートし、コンポーネント内でレンダリングします。

app/page.tsx

import Image from 'next/image'
 
export default function Page() {
  return <Image src="" alt="" />
}

srcプロパティには、ローカルまたはリモート画像を指定できます。

ローカル画像

画像やフォントなどの静的ファイルは、ルートディレクトリにあるpublicというフォルダーの下に保存できます。public内のファイルは、ベースURL (/) から参照できます。

Folder structure showing app and public folders

app/page.tsx

import Image from 'next/image'
import profilePic from './me.png'
 
export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
      // width={500} automatically provided
      // height={500} automatically provided
      // blurDataURL="data:..." automatically provided
      // placeholder="blur" // Optional blur-up while loading
    />
  )
}

Next.jsは、インポートされたファイルに基づいて画像の本来のwidthとheightを自動的に決定します。これらの値は、画像の比率を決定し、画像の読み込み中に累積レイアウトシフトを防ぐために使用されます。

リモート画像

リモート画像を使用するには、srcプロパティにURL文字列を指定します。

app/page.tsx

import Image from 'next/image'
 
export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

Next.jsはビルドプロセス中にリモートファイルにアクセスできないため、width、height、およびオプションのblurDataURLプロパティを手動で指定する必要があります。widthとheightは、画像の正しいアスペクト比を推測し、画像読み込みによるレイアウトシフトを回避するために使用されます。

リモートサーバーからの画像を安全に許可するには、next.config.jsでサポートされるURLパターンのリストを定義する必要があります。悪意のある使用を防ぐため、できるだけ具体的に指定してください。例えば、以下の設定では特定のAWS S3バケットからの画像のみが許可されます

next.config.ts

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

フォントの最適化

next/fontモジュールは、フォントを自動的に最適化し、外部ネットワークリクエストを削除して、プライバシーとパフォーマンスを向上させます。

あらゆるフォントファイルに対して組み込みのセルフホスティングが含まれています。これにより、レイアウトシフトなしでウェブフォントを最適に読み込むことができます。

next/fontの使用を開始するには、next/font/localまたはnext/font/googleからインポートし、適切なオプションを付けて関数として呼び出し、フォントを適用したい要素のclassNameを設定します。例:

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="en" className={geist.className}>
      <body>{children}</body>
    </html>
  )
}

Googleフォント

あらゆるGoogleフォントを自動的にセルフホストできます。フォントはデプロイに含まれ、デプロイと同じドメインから提供されるため、ユーザーがサイトを訪問した際にブラウザからGoogleにリクエストが送信されることはありません。

Googleフォントの使用を開始するには、選択したフォントをnext/font/googleからインポートします。

app/layout.tsx

import { Geist } from 'next/font/google'
 
const geist = Geist({
  subsets: ['latin'],
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={geist.className}>
      <body>{children}</body>
    </html>
  )
}

最高のパフォーマンスと柔軟性のために可変フォントの使用をお勧めします。ただし、可変フォントを使用できない場合は、ウェイトを指定する必要があります。

app/layout.tsx

import { Roboto } from 'next/font/google'
 
const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  )
}

ローカルフォント

ローカルフォントを使用するには、next/font/localからフォントをインポートし、ローカルフォントファイルのsrcを指定します。

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="en" className={myFont.className}>
      <body>{children}</body>
    </html>
  )
}

単一のフォントファミリーに複数のファイルを使用したい場合、srcは配列にすることができます。

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',
    },
    {
      path: './Roboto-BoldItalic.woff2',
      weight: '700',
      style: 'italic',
    },
  ],
})

画像とフォントの最適化方法

画像の最適化

ローカル画像

リモート画像

フォントの最適化

Googleフォント

ローカルフォント

APIリファレンス

Font

Image