Next.js と TypeScript で、Image コンポーネントで画像を表示する方法

TwitterFacebookHatena

TL;DR

この記事では、Next.js の Image コンポーネントを使った画像表示の方法について、具体的なコードとともに解説します。Image コンポーネントをうまく利用することで、Web サイトのパフォーマンスを向上させ、ユーザー体験を改善することが可能となります。

開発環境 バージョン
Next.js 13.4.3
TypeScript 5.0.4
Emotion 11.11.0
React 18.2.0

Image コンポーネントとは？

Next.js が提供する Image コンポーネントは、画像の最適化を自動で行ってくれる非常に便利なツールです。画像のロード時間を最適化し、Web サイトのパフォーマンスを向上させる機能を提供します。

import Image from 'next/image'

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

この基本的なコードの例では、src 属性で指定した画像を、width と height で指定したサイズで表示します。alt 属性は、画像の説明を表し、アクセシビリティと SEO に役立ちます。

オプション

Next.js の Image コンポーネントは多くのオプションを提供しています。

プロパティ 型 必須 説明
src string Yes 画像のパス。内部画像の場合はプロジェクトの public ディレクトリからの相対パス、外部画像の場合は URL が指定されます。
alt string Yes 画像の代替テキスト。視覚障害者や画像が読み込めない状況をサポートするために重要です。
width number | string No 画像の横幅。CSS と同様の単位（px,%,vw など）が使えます。
height number | string No 画像の縦幅。CSS と同様の単位（px,%,vh など）が使えます。
layout "fill" | "fixed" | "intrinsic" | "responsive" No 画像のレイアウトタイプ。これにより、画像の大きさとスケーリングの振る舞いが決定されます。
unoptimized boolean No 最適化されていない画像を使用する場合は true にします。主に開発環境で使用します。
priority boolean No ページの最初に表示する重要な画像に true を設定すると、ローディングパフォーマンスが向上します。
placeholder "blur" | "empty" No 画像がロードされるまでのプレースホルダー。"blur"を指定すると、ぼかし効果が適用されます。
blurDataURL string No placeholder="blur"が設定されている場合、このプロパティで指定した画像をブラー画像として使用します。
objectFit "fill" | "contain" | "cover" | "none" | "scale-down" No CSS の object-fit と同じです。画像の表示方法を制御します。
objectPosition string No CSS の object-position と同じです。画像の位置を制御します。

これらのプロパティを適切に組み合わせることで、多種多様な表示条件に対応する画像を配置することが可能になります。

Next.js で、Image コンポーネントを実装

では、より具体的な使用例を見てみましょう。以下に、Next.js と TypeScript を用いて、Image コンポーネントを利用するコードを示します。

// components/ImageWrapper.tsx
import Image from 'next/image'

type ImageWrapperProps = {
  src: string
  alt: string
  width: number
  height: number
}

const ImageWrapper = ({ src, alt, width, height }: ImageWrapperProps) => {
  return <Image src={src} alt={alt} width={width} height={height} />
}

export default ImageWrapper

このコードでは、画像のソースパス、代替テキスト、表示幅、表示高さをプロップとして受け取り、Image コンポーネントを利用して画像を表示します。このコンポーネントを使うことで、任意の画像を簡単にページに表示できます。

// pages/index.tsx
import ImageWrapper from '../components/ImageWrapper'

const Home = () => {
  return (
    <div>
      <ImageWrapper src="/path/to/image.jpg" alt="an image" width={500} height={300} />
    </div>
  )
}

export default Home

このようにして ImageWrapper コンポーネントを使うと、より簡潔に画像をページに表示できますね。

Image コンポーネントの高度な使用方法

さらに高度な例として、外部 URL から画像を取得し、表示する方法について考えてみましょう。この場合、Next.js の next.config.js ファイルで外部 URL を許可する設定が必要となります。

// next.config.js
module.exports = {
  images: {
    domains: ['example.com'],
  },
}

この設定を加えることで、example.com からの画像を Image コンポーネントで表示することが可能となります。

// components/ExternalImage.tsx
import Image from 'next/image'

type ExternalImageProps = {
  src: string
  alt: string
  width: number
  height: number
}

const ExternalImage = ({ src, alt, width, height }: ExternalImageProps) => {
  return <Image src={`https://example.com/${src}`} alt={alt} width={width} height={height} />
}

export default ExternalImage

Emotion で実装

次に、CSS-in-JS ライブラリである Emotion を使って、画像のスタイルを設定する方法を見てみましょう。

// components/StylishImage.tsx
/** @jsxImportSource @emotion/react */
import Image from 'next/image'
import { css } from '@emotion/react'

type StylishImageProps = {
  src: string
  alt: string
  width: number
  height: number
}

const imageStyle = css`
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
`

const StylishImage = ({ src, alt, width, height }: StylishImageProps) => {
  return <Image css={imageStyle} src={src} alt={alt} width={width} height={height} />
}

export default StylishImage

このコードでは、Emotion の css 関数を使って、画像に丸みを帯びたボーダーと、簡単な影を追加しています。このように Emotion を利用することで、Next.js の Image コンポーネントにさらに個性を追加することができます。

以上が、Next.js と TypeScript、Emotion を用いて Image コンポーネントを活用する方法になります。Next.js の Image コンポーネントをうまく使うことで、パフォーマンスと使いやすさを兼ね備えた Web アプリケーションを作ることが可能になります。

Jamstack での制作を依頼する

Next.js と TypeScript で、Image コンポーネントで画像を表示する方法