はじめに

Tailwindスターターブログは、Next.jsの組み込み画像コンポーネントをすぐに使える状態でサポートしており、MarkdownまたはMDXドキュメント内のデフォルトの画像タグを自動的に提供されたImageコンポーネントに置き換えます。

使い方

新しいページルート/JavaScriptファイルで使用するには、単純に画像コンポーネントをインポートして呼び出します。例：

import Image from 'next/image'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image src="/me.png" alt="Picture of the author" width={500} height={500} />
      <p>Welcome to my homepage!</p>
    </>
  )
}

export default Home

Markdownファイルの場合、デフォルトの画像タグを使用でき、ビルドプロセスでデフォルトの img タグが Image コンポーネントに置き換えられます。

data/img/ocean.jpg に ocean.jpg というファイルがあると仮定すると、以下のコードで最適化された画像が生成されます。

![ocean](/static/images/ocean.jpg)

あるいは、MDXを使用しているので、画像コンポーネントを直接使用することもできます！ただし、固定の幅と高さを指定する必要があることに注意してください。img タグメソッドはサイズを自動的に解析します。

<Image alt="ocean" src="/static/images/ocean.jpg" width={256} height={128} />

注意: 画像を保存しようとすると、ブラウザがサポートしている場合、webp形式になります！

写真提供：YUCAR FotoGrafik （Unsplash）

メリット

• Webpによるより小さい画像サイズ（jpegより約30%小さい）
• レスポンシブ画像 - ユーザーのビューポートに基づいて適切な画像サイズが配信される
• 遅延読み込み - 画像はビューポートにスクロールされた時に読み込まれる
• Cumulative Layout Shiftを回避
• ビルド時ではなくオンデマンドで最適化 - ビルド時間の増加なし！

制限事項

• next/image に依存しているため、CloudinaryやImgixなどの外部画像CDNを使用しない限り、ホスティングにはVercelの使用が事実上必要です。これは、コンポーネントが高度に最適化された画像CDNを呼び出すサーバーレス関数のように動作するためです。

  Vercelに縛られたくない場合は、lib/mdx.js の remarkPlugins から imgToJsx を削除できます。これにより、デフォルトの img タグの置換が回避されます。

  あるいは、ビルド時の画像最適化がサポートされるのを待つこともできます。別のライブラリである next-optimized-images はそれを行いますが、ここでは行われていないwebpackを通じた画像の変換が必要です。

• 外部リンクからの画像は next/image を通過しません

• すべての画像は public フォルダに保存する必要があります（例：/static/images/ocean.jpeg）