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

なぜ学ぶか： 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の設定を忘れずに。