next/image

next/image（ネクストイメージ）を分かりやすく？

next/image（読み方：ネクストイメージ）は、Next.js の機能の 1 つであり、画像の最適化・レイアウトシフト・レスポンシブ対応を簡単に行うことができます。next/image を使用することで、画像の最適化や遅延ロード（lazy loading）、自動サイズ調整などが可能になり、パフォーマンスが向上します。

next/image の導入方法

next/image を使用するためには、まず Next.js プロジェクトにImageコンポーネントをインポートします。

// pages/index.tsx
import React from 'react'
import Image from 'next/image'

const HomePage = () => {
  return (
    <Image
      src="/images/sample.png"
      width={500}
      height={500}
      alt="テキスト"
    />
  )
}

export default HomePage

上記の例では、Imageコンポーネントをインポートし、src属性に画像のパスを指定しています。また、alt属性には画像の代替テキストを指定し、widthおよびheight属性には画像のサイズを指定しています。

パラメーター

Imageコンポーネントには、次のパラメーターを指定することができます。

画像最適化の設定

next/image は、デフォルトで画像の最適化を行いますが、独自の設定を行いたい場合はnext.config.jsファイルを作成し、imagesオブジェクトに設定を記述します。

// next.config.js
module.exports = {
  images: {
    domains: ['example.com'],
    loader: 'imgix',
    path: 'https://example.com/myaccount/',
  },
}

上記の例では、domainsに画像を取得するドメインを指定し、loaderに画像最適化サービスの種類を指定しています。また、pathには画像最適化サービスのパスを指定しています。

レスポンシブ対応

next/image を使用すると、簡単に画像のレスポンシブ対応ができます。layout属性をresponsiveに設定し、widthおよびheight属性を指定することで、画像のアスペクト比が維持されたまま自動的にサイズ調整されます。

// pages/index.tsx
import React from 'react'
```typescript
import Image from 'next/image';

const HomePage = () => {
  return (
    <div>
      <Image
        src="/path/to/image.jpg"
        alt="Sample Image"
        layout="responsive"
        width={500}
        height={300}
      />
    </div>
  );
};

export default HomePage;

上記の例では、layout属性にresponsiveを指定することで、画像のレスポンシブ対応が行われています。

画像の遅延ロード（lazy loading）

next/image はデフォルトで画像の遅延ロード（lazy loading）をサポートしています。これにより、画像が画面上に表示されるまで読み込みが遅延され、パフォーマンスが向上します。

ただし、遅延ロードを無効にしたい場合は、loading属性をeagerに設定することができます。

// pages/index.tsx
import React from 'react'
import Image from 'next/image'

const HomePage = () => {
  return (
    <div>
      <Image src="/path/to/image.jpg" alt="Sample Image" width={500} height={300} loading="eager" />
    </div>
  )
}

export default HomePage

上記の例では、loading属性にeagerを指定することで、画像の遅延ロードが無効化されています。

画像の優先読み込み

next/image は、特定の画像を優先的に読み込むこともできます。これは、ページ上に表示される重要な画像を素早く読み込ませる場合に有用です。priority属性をtrueに設定することで、画像の優先読み込みが行われます。

// pages/index.tsx
import React from 'react'
import Image from 'next/image'

const HomePage = () => {
  return (
    <div>
      <Image src="/path/to/important-image.jpg" alt="Important Image" width={500} height={300} priority />
    </div>
  )
}

export default HomePage

上記の例では、priority属性を指定することで、画像の優先読み込みが行われています。

next/image を使用することで、画像の最適化やレスポンシブ対応、遅延ロードなどの機能が手軽に実現できます。これにより、Web サイトのパフォーマンスが向上し、より良いユーザーエクスペリエンスが提供できます。Next.js と TypeScript の組み合わせで、型安全な画像処理を行うことができます。