画像とフォントの最適化方法
Next.jsには画像とフォントを自動的に最適化する機能が組み込まれています。このページでは、それらの使い方を説明します。
画像の最適化
Next.jsの<Image>コンポーネントはHTML <img>要素を拡張し、以下の機能を提供します：
- サイズの最適化： 各デバイスに対して適切なサイズの画像を自動的に提供し、WebPなどの最新の画像フォーマットを使用します。
- 視覚的な安定性： 画像読み込み時のレイアウトシフトを自動的に防止します。
- 高速なページ読み込み： ネイティブブラウザの遅延読み込みを使用して、ビューポートに入ったときにのみ画像を読み込み、オプションでぼかしプレースホルダを表示できます。
- アセットの柔軟性： リモートサーバーに保存されている画像でも、オンデマンドでリサイズできます。
<Image>を使い始めるには、next/imageからインポートしてコンポーネント内でレンダリングします。
import Image from 'next/image'
export default function Page() {
return <Image src="" alt="" />
}srcプロパティにはローカル画像またはリモート画像を指定できます。
ローカル画像
画像やフォントなどの静的ファイルは、ルートディレクトリのpublicというフォルダに保存できます。public内のファイルはベースURL（/）から始まるパスでコードから参照できます。
import Image from 'next/image'
import profilePic from './me.png'
export default function Page() {
return (
<Image
src={profilePic}
alt="著者の写真"
// width={500} 自動的に提供される
// height={500} 自動的に提供される
// blurDataURL="data:..." 自動的に提供される
// placeholder="blur" // 読み込み中のぼかし表示（オプション）
/>
)
}Next.jsはインポートされたファイルに基づいて、画像の本来のwidthとheightを自動的に判断します。これらの値は画像のアスペクト比を決定し、画像の読み込み中に累積レイアウトシフトを防ぐために使用されます。
リモート画像
リモート画像を使用するには、srcプロパティにURL文字列を指定します。
import Image from 'next/image'
export default function Page() {
return (
<Image
src="https://s3.amazonaws.com/my-bucket/profile.png"
alt="著者の写真"
width={500}
height={500}
/>
)
}Next.jsはビルド時にリモートファイルにアクセスできないため、width、height、オプションのblurDataURLプロパティを手動で指定する必要があります。widthとheightは画像の正確なアスペクト比を推測し、画像の読み込みによるレイアウトシフトを防ぐために使用されます。
リモートサーバーからの画像を安全に許可するには、next.config.jsでサポートするURLパターンのリストを定義する必要があります。悪意のある使用を防ぐため、できるだけ具体的に指定してください。例えば、次の設定では特定のAWS S3バケットからの画像のみを許可します：
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モジュールは自動的にフォントを最適化し、プライバシーとパフォーマンスを向上させるために外部ネットワークリクエストを削除します。
これにはあらゆるフォントファイルのビルトインセルフホスティングが含まれています。つまり、レイアウトシフトなしでWebフォントを最適に読み込むことができます。
next/fontを使い始めるには、next/font/localまたはnext/font/googleからインポートし、適切なオプションを指定して関数として呼び出し、フォントを適用したい要素のclassNameを設定します。例：
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から選択したフォントをインポートします：
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>
)
}最高のパフォーマンスと柔軟性のために可変フォントを使用することをお勧めします。しかし、可変フォントを使用できない場合は、ウェイトを指定する必要があります：
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を指定します。
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>
)
}1つのフォントファミリーに複数のファイルを使用したい場合は、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',
},
],
})