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）
}

SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:link="http://www.w3.org/1999/xlink" fill="#000000" height="2rem" version="1.1" id="Capa_1" viewBox="0 0 297.613 297.613" xml:space="preserve"><g>
                            <circle cx="15.279" cy="14.83" r="14.83"></circle>
                            <circle cx="59.32" cy="59.769" r="14.83"></circle></g>
</svg>

のような形でSVGを挿入する場合は、NextJSでは「：」が使えないので、

xmlns:link  -> xmlnsXlink
xml:space  -> xmlSpace

に修正する必要があります

また、JSXでは属性名に「-」が入るものはキャメルケースに変換する必要あるため、

<svg xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" viewBox="0 0 24 24" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 9.94172C7.00137 8.96443 7.29495 8.00988 7.843 7.20072C8.39448 6.38448 9.1753 5.7498 10.087 5.37672C11.9541 4.61174 14.0974 5.033 15.536 6.44772C16.5916 7.4896 17.1196 8.95291 16.9724 10.4288C16.8252 11.9047 16.0186 13.2349 14.778 14.0477C13.9477 14.571 12.9812 14.8372 12 14.8127C10.6855 14.84 9.41385 14.3448 8.464 13.4357C7.52845 12.5137 7.00119 11.2553 7 9.94172Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.75 14.8127C12.75 14.3985 12.4142 14.0627 12 14.0627C11.5858 14.0627 11.25 14.3985 11.25 14.8127H12.75ZM11.25 17.0007C11.25 17.415 11.5858 17.7507 12 17.7507C12.4142 17.7507 12.75 17.415 12.75 17.0007H11.25ZM14 17.7507C14.4142 17.7507 14.75 17.415 14.75 17.0007C14.75 16.5865 14.4142 16.2507 14 16.2507V17.7507ZM12 16.2507C11.5858 16.2507 11.25 16.5865 11.25 17.0007C11.25 17.415 11.5858 17.7507 12 17.7507V16.2507ZM11.25 19.0007C11.25 19.415 11.5858 19.7507 12 19.7507C12.4142 19.7507 12.75 19.415 12.75 19.0007H11.25ZM12.75 17.0007C12.75 16.5865 12.4142 16.2507 12 16.2507C11.5858 16.2507 11.25 16.5865 11.25 17.0007H12.75ZM12 17.7507C12.4142 17.7507 12.75 17.415 12.75 17.0007C12.75 16.5865 12.4142 16.2507 12 16.2507V17.7507ZM10 16.2507C9.58579 16.2507 9.25 16.5865 9.25 17.0007C9.25 17.415 9.58579 17.7507 10 17.7507V16.2507ZM11.25 14.8127V17.0007H12.75V14.8127H11.25ZM14 16.2507H12V17.7507H14V16.2507ZM12.75 19.0007V17.0007H11.25V19.0007H12.75ZM12 16.2507H10V17.7507H12V16.2507Z" fill="#000000"/>

については、

fill-rule  ->  filRule
clip-rule  ->  clipRule
stroke-linecap  ->  strokeLinecap
stroke-linejoin  -> stroleLinejoin
stroke-width  -> strokeWidth

に変換する必要があります

BACK