Shopping

Amazon

2022-07-30 SATURDAY 1

Sign in - Google Accounts

2 years ago

2022-07-27 WEDNESDAY 1

2022-07-16 SATURDAY 4

2022-07-09 SATURDAY 2

Next.js の Image コンポーネントで画像を表示する (next/image)

2 years ago

Image コンポーネントの特徴 Next.js が提供している Image コンポーネント (next/image) を使用すると、image 要素をそのまま配置するのに比べて次のような恩恵を受けられます。 遅延ロード (Lazy loading) Web ブラウザでその画像がビューポート内(画面内)に入って来たときに初めてダウンロードされるようになります。大きなページの末尾部分に配置された画像が、無駄にダウンロードされてしまうのを防ぐことができます。 画像の最適化 アクセスしてきたクライアントに応じて画像ファイルを最適化して配信します。例えば、圧縮効率のよい WebP フォーマットなどに変換してくれます。リクエスト時にサーバーサイドでオンデマンドで最適化するため、Image コンポーネントを使うことでビルド時間が伸びてしまうことはありません。外部サーバーの画像を間接的に表示する場合も最適化できます。 レスポンシブ 画面サイズに応じたレスポンシブ表示 (CSS) がデフォルトで行われます。 画像最適化に関しては、Next.js サーバー上でホスティングしているときしか動作しないといった制約がありますが、遅延ローディングがデフォルトで有効になるのは便利です。 Image コンポーネントの基本的な使い方 次のサンプルコンポーネントでは、Image コンポーネントを使って /public/images/avatar.png ファイルを表示しています。 components/Avatar.tsx import Image from 'next/image' export const Avatar: React.FC = () => ( <Image src="/images/avatar.png" width={64} height={64} alt="My avatar" /> ) ☝️ public ディレクトリ public ディレクトリ以下に配置したファイルは、Web サイトへのアクセス時には、ルートパス (/) からの相対パスで参照できるようになります。 public ディレクトリは、必ず Next.

2022-07-06 WEDNESDAY 8


Yasuhiro Yokota Today