Next.js 이미지 구성 요소 치트시트

일반적인 사용 사례가 포함된 Next.js 이미지 구성 요소용 치트시트

Next.js 버전 10에 이미지 구성 요소가 도입된 후 일반<img /> 구성 요소와 함께 Next.js를 사용하는 경우는 거의 없으며 이제 잘못된 것으로 간주됩니다! 이 문서는 Next.js 이미지 구성 요소의 가장 일반적인 사용 사례를 배우고 기억하는 데 도움이 됩니다.

빠른 치트시트:

1. 미리 정의된 너비와 높이:

import Image from 'next/image'
import example from '../asset/myimage.png'

const Example = () => {
  return (
    <Image
      src={example}
      alt="Alt text for the picture"
      width="350px"
      height="300px"
    />
)

2. 레이아웃 소품을 사용하여 미리 정의된 너비와 높이:

레이아웃 소품을 사용하면 5가지 옵션이 제공됩니다.

'채우다'
'반응'
'내재적'
'결정된'
그리고 이제 '원시'

import Image from 'next/image'
import example from '../asset/myimage.png'

const Example = () => {
  return (
    <Image
      src={example}
      alt="Alt text for the picture"
      width="350px"
      height="300px"
      layout="responsive" 
  />
)

레이아웃 채우기 사용(동적 이미지 크기)

import Image from 'next/image'
import example from '../asset/myimage.png'

const Example = () => {
  return (
    <Image
        src={example}
        alt="Alt text for the picture"
        layout="fill"
        objectFit="cover"
        quality={100}
   />
)

3. Tailwind CSS를 사용한 스타일링

import Image from 'next/image'
import example from '../asset/myimage.png'

const Example = () => {
  return (
    <div className="relative w-24 h-24 border border-gray-200 rounded-md overflow-hidden">
        <Image
           src={product.image}
           alt={product.title}
           layout="fill"
           objectFit="cover"
       />
    </div>
)

4. 배경 이미지로 Next.js 이미지

import Image from 'next/image'
import example from '../asset/myimage.png'

const Background = () => (
  <div>
    <ViewSource pathname="pages/background.js" />
    <div className="fixed h-screen w-screen overflow-hidden
  -z-10">
      <Image
        alt="Mountains"
        src="/mountains.jpg"
        layout="fill"
        objectFit="cover"
        quality={100}
      />
    </div>
  </div>
)

아래 의견에서 자신이 가장 좋아하는/가장 일반적인 사용 사례를 제안하십시오!

BuildNextShop.com에서 Next.js에 대해 자세히 알아보세요.