이미지 최적화

이미지 최적화 방식에는 세가지가 있다.

• lazy loading
• 사이즈 최적화
• layout shift방지(이미지 로딩이느리면 레이아웃이 밀리는 현상 방지)

Image

import Image from 'next/image';

리액트 넥스트에서 이거를 사용하면 이 세가지를 자동으로 해줌

다만 이 Image를 사용하려면 src로 이미지를 import해와야한다.

예)

import Image from 'next/image';
import food0 from '/public/food0.png';

const List = () => {
  let products = ['Tomatoes', 'Pasta', 'Coconut'];

  return (
    <div>
      <h4 className='title' style={{ fontSize: '20px' }}>
        상품목록
      </h4>
      {products.map((product, index) => (
        <div className='food' key={index}>
          <Image src={food0} alt='음식사진' />
          <h4>{product} $40</h4>
        </div>
      ))}
    </div>
  );
};

export default List;

외부 경로의 이미지 주소를 사용하고싶으면 어떻게 해야할까?

예) 아래와같이 입력하면 에러를 낸다.

import Image from 'next/image';

const List = () => {
  return (
   <Image src='https://s3.amazonaws.com/my-bucket/profile.png' alt='음식사진' />
  );
};

export default List;

1. Image 속성에 width와 height를 입력해줘야한다.
   (혹은 fill="true" 이거 대신 넣고 부모 <div>가 width, height를 대신 조절해도 된다.)

import Image from 'next/image'

export default function Home() {
  return(
    <div>
      <Image src="https://s3.amazonaws.com/my-bucket/profile.png" width="500" height="500"/>
    <div/>
)} 

2. 하단 링크처럼 세팅을 해야한다.
   https://beta.nextjs.org/docs/optimizing/images#remote-images