Summary  
This chapter covers using Next.js’ Image component to automatically optimize, lazily load, and responsively render images with intelligent resizing and support for modern formats to ensure layout stability.  

General domain of usage  
Front-end web development

画像は、ウェブサイトの視覚的な印象において重要な役割を果たします。Next.jsで画像を追加する方法に注目します。

`<Image>`コンポーネントは、従来のHTMLの`<img>`タグを拡張したもので、自動最適化機能を多数備えています。現代的なウェブデザインの複雑さに対応するために設計されており、読み込み時のレイアウトシフトを軽減することで、視覚的に安定したユーザー体験を実現します。また、このコンポーネントは画像サイズを自動的に調整し、小さいビューポートを持つデバイスでの帯域幅消費を削減することで、コンテンツ配信を最適化します。

プロジェクトに画像を組み込む方法を確認します。`public` フォルダーには `hero-desktop.png` と `hero-mobile.png` が含まれています。これらを `app/page.tsx` ファイル内で、`Image` の `next/image` コンポーネントを使って追加します。

アプリのホームページに移動すると、画像が表示されます。

モバイル版では、幅 `560px`、高さ `620px` の画像をもう一つ追加します。問題が発生した場合は、下記の解決策を参照してください。

Next.jsを使用して、モダンで高性能なウェブアプリケーションの構築方法を学びます。構造化されたレイアウト、スタイリング、ルーティングによるシームレスなナビゲーションでプロジェクトをセットアップします。効率的なデータ取得と表示を行い、レンダリングとパフォーマンスを最適化します。ページネーション、CRUD操作、グローバル検索などの高度な機能を実装し、動的なウェブアプリを実現します。Next.jsプロジェクトのデプロイ、データベースとの接続、認証機能の追加によるユーザーデータの保護も扱います。

Next.jsフレームワークに取り組む前に学ぶべき内容、このコースで期待できること、そして構築するものについて説明します。

プロジェクトのセットアップを行い、アプリにスタイリングを追加する方法を確認し、画像、フォント、ページ、レイアウトなどのビジュアル面を扱います。

アプリの新しいビューを簡単に作成・管理し、組み込まれたルーティングシステムによってすべてのページをシームレスにナビゲートする方法を学びます。

GitHubおよびVercelアカウントを使用してNext.jsアプリをデプロイします。さらに、アプリに必要なデータを提供するためのデータベースを構築します。

データを明確かつ効率的に取得し、ユーザーに表示する方法を検討します。

ページネーション、CRUD操作、グローバル検索、フォームバリデーションなどの最新ウェブ機能の実装方法を学びます。

Next.jsでの画像の扱い

プロジェクトに戻る

実践例