2．画像を入れる

NextJS

next/image

image optimizationを利用する場合はnext/imageを使用する必要があります

（cssでbackground-imageにする場合は画像最適化されません）

publicディレクトリに画像ファイルを配置します

import Image from 'next/image';

export default function Home() {
    return (
        <Image
            src="/sample.jpg"  <--- public/sample.jpgが参照されます（ビルド時もこれでOK）
            alt=""
            width={1000}  <--- 数値で指定する必要があります（100%とかはダメ）
            height={373}  <--- width,heightプロパティは必須です
            className={styles.responsiveImage} <--- ※1
    );
}

※1 … layout=”responsive”はNext.js 12 以前の古い記法です

現在はCSSでレスポンシブ対応するのが推奨されています

.responsiveImage {
    max-width: 100%;
    height: auto;
}

image optimization

next.jsではビルド時に画像を圧縮して最適化(optimize)してくれます

ビルドして生成されたimgタグを見てみると、

/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fcat.3166d87a.jpeg&w=1080&q=75

これをURLデコードすると
/_next/image?url=/_next/static/media/cat.3166d87a.jpeg&w=1080&q=75

となっています

&w=1080&q=75　… wは画像の横幅、qは画像のクオリティを示しています（qはデフォルトで75%）

このwとqがimage optimize機能です

CSS

div {
    bacground: url("/sample.jpg");  <--- pubic/sample.jpgが参照されます（ビルド時もこれでOK）
}
BACK