next.js에서 이미지를 사용할때 next에서 지원하는 Image가 있다
import Image from 'next/image''Image'는 기본적인 최적화를 해주는데 기본적으로 4가지가 있다.
로컬 이미지(jpg, png, webp...)를 사용하려면 해당 이미지의 경로로 import해오면 된다.
import profilePic from '../assets/me.png'
Next.js는 가져온 파일에 따라 이미지의 너비와 높이를 자동으로 결정하며 이 값은 이미지가 로드되는 동안 누적 레이아웃 이동을 방지하는데 사용된다.
import Image from 'next/image'
import profilePic from '../assets/me.png'
function Home() {
return (
<>
<h1>My Homepage</h1>
<Image
src={profilePic}
alt="Picture of the author"
/>
<p>Welcome to my homepage!</p>
</>
)
}원격이미지를 사용하려면 src 속성이 상대적이거나 절대적인 URL 문자열이어야 한다.
Next.js는 빌드 프로세스 중에 원격 파일에 액세스할 수 없으므로 너비, 높이 및 선택적 blurDataURL props를 수동으로 제공해야 한다.
import Image from 'next/image'
export default function Home() {
return (
<>
<h1>My Homepage</h1>
<Image
src="/me.png"
alt="Picture of the author"
width={500}
height={500}
/>
<p>Welcome to my homepage!</p>
</>
)
}