画像・フォント・メタデータ

なぜ学ぶか： Next.jsのコードでは<img>の代わりに<Image>が使われ、ページの先頭にmetadataという設定があります。「なぜ普通の書き方じゃないの？」の答えは自動最適化です。例で見てください。

まずはこの例を見てみましょう

import Image from "next/image";

// ページの「名刺」: タブ名・検索結果・シェア時に使われる
export const metadata = {
  title: "プロフィール | My App",
  description: "自己紹介のページです。",
};

export default function ProfilePage() {
  return (
    // 自動で圧縮・サイズ調整・遅延読み込みしてくれる賢い img
    <Image src="/avatar.png" width={120} height={120} alt="アバター画像" />
  );
}

Imageは「最適化を全部やってくれるimg」。metadataは「ページの名刺」です。

コード例

import Image from "next/image";
import type { Metadata } from "next";

// ページの名刺（タブ名・検索結果・SNSシェアで使われる）
export const metadata: Metadata = {
  title: "プロフィール | My App",
  description: "自己紹介のページです。",
};

export default function ProfilePage() {
  return (
    <div>
      <h1>プロフィール</h1>
      {/* 自動で圧縮・遅延読み込みされる賢い img */}
      <Image src="/avatar.png" width={120} height={120} alt="アバター画像" />
    </div>
  );
}

公開したアプリのタブ名が「Create Next App」のまま — はよくある恥ずかしいミス。metadataの設定を忘れずに。