Next.js - Image 기본 기능 활용하기

이미지 최적화에 도움이 되는 next/image 기본 사용법을 알아보겠습니다. 기본 사용법이고, 실제 최적화에 해당하는 내용은 추후 포스팅하겠습니다.

next/image

1. public 폴더 생성

Next.js에서 public 폴더에 저장된 파일들은 정적 파일(static files)로 취급됩니다. 이러한 파일들은 서버에서 직접 제공되어 클라이언트(브라우저)에서 접근할 수 있어야 합니다.
하지만 Next.js는 기본적으로 파일 시스템 라우팅(File System Routing)을 사용하여 페이지를 서빙하며, 이는 정적 파일을 자동으로 처리하지 않습니다. 따라서 public 폴더 안에 있는 이미지 파일은 기본적으로 브라우저에서 접근할 수 없는 상태입니다.
정적 파일을 제공하려면 Next.js의 내장된 기능을 사용해야 합니다. Next.js에서는 public 폴더 또는 public/images 폴더를 사용하여 정적 파일을 관리하는 것이 좋습니다. 해당 폴더 안에 이미지 파일을 저장한 뒤, 이미지를 사용하려면 다음과 같이 경로를 지정하여 불러와야 합니다.

import Image from 'next/image';

const MyComponent = () => {
  return (
    <div>
      <Image src="/images/my-image.jpg" alt="My Image" width={500} height={300} />
    </div>
  );
};

export default MyComponent;

위의 예시에서 /static/images는 public 폴더의 static/images 경로를 나타냅니다. 이미지를 불러올 때는 next/image 모듈을 사용하고, 경로를 /static으로 시작하는 것에 유의해야 합니다.
만약 정적 파일이 아닌 동적 파일로 처리해야 하는 경우, Next.js의 API 라우팅 기능을 사용하여 파일을 제공할 수 있습니다. 자세한 내용은 아래 이미지 링크의 Next.js 공식 문서에서 "API Routes" 섹션을 참조하시기 바랍니다. 향후에 해당 내용도 다루겠습니다.

API Routes

2. 더미 데이터 활용해서 map() 함수로 렌더링 하기

import Image from 'next/image';

const DUMMY_events = [
  {
    id: 'event1',
    image: 'images/my-image1.jpg',
  },
  {
    id: 'event2',
    image: 'images/my-image2.jpg',
  }
];

const EventList = () => {
  return (
    <div>
      {DUMMY_events.map((event) => (
        <div key={event.id}>
          <Image src={event.image} alt="이벤트 이미지" width={300} height={200} />
        </div>
      ))}
    </div>
  );
};

export default EventList;

위의 코드에서 DUMMY_events는 이벤트 데이터를 담고 있는 배열입니다. 각 이벤트는 id와 image 속성을 가지고 있습니다. EventList 컴포넌트에서는 DUMMY_events 배열을 map() 함수를 사용하여 순회하며, 각 이벤트에 대해 Image 컴포넌트를 렌더링 합니다. event.image를 src 속성으로 전달하고, 이미지의 원하는 width와 height를 지정합니다.
이미지 경로가 올바르게 지정되어 있고 프로젝트의 이미지디렉터리를기준으로 상대 경로로 설정되어 있는지 확인해주세요.

3. styled-components로 스타일링하기

우선, 스타일드 컴포넌트 모듈을 설치해 줍니다.
 npx yarn add styled-components 
타입스크립트를 사용하는 경우 아래 모듈도 설치해 줍니다.
 npm i --save-dev @types/styled-components 

import Image from 'next/image';
import styled from 'styled-components';
import { EventTypes } from '@/dummy-data';

const Img = styled(Image)`
  height: auto !important;
  max-width: 600px;
  position: relative !important;
`;

const DUMMY_events = [
  {
    id: 'event1',
    image: 'images/my-image1.jpg',
  },
  {
    id: 'event2',
    image: 'images/my-image2.jpg',
  }
];

const EventList = () => {
  return (
    <div>
      {DUMMY_events.map((event) => (
        <div key={event.id}>
          <Image src={event.image} alt="이벤트 이미지" width={300} height={200} />
        </div>
      ))}
    </div>
  );
};

export default EventList;

위 코드에서는 styled-components를 사용하여 이미지에 스타일을 적용하고 있습니다. 스타일드 컴포넌트를 사용하면 컴포넌트와 스타일을 함께 정의할 수 있어 코드의 가독성과 재사용성을 높일 수 있습니다.
먼저 styled-components를 import 하고, Img라는 스타일드 컴포넌트를 생성합니다. Img는 styled(Image)와 같이 Image 컴포넌트를 감싸는 형태로 정의됩니다. 이렇게 하면 Img 컴포넌트가 Image 컴포넌트를 상속받아서 스타일을 적용할 수 있게 됩니다.
 
이제 Img 컴포넌트 내부에서 CSS 속성을 정의할 수 있습니다. 예를 들어 height, max-width, position 등의 속성을 설정할 수 있습니다. 또한 !important를 사용하여 해당 스타일이 다른 스타일보다 우선적으로 적용되도록 설정할 수 있습니다.
스타일드 컴포넌트로 생성된 Img는 이후에 JSX 코드에서 일반 컴포넌트처럼 사용할 수 있습니다. 위의 코드에서는 Img 컴포넌트를 <Image src={event.image} alt="이벤트 이미지" width={300} height={200} />와 같이 사용하고 있습니다. 이렇게 하면 Image 컴포넌트에 Img 스타일이 적용되어 렌더링 됩니다.
이러한 방식으로 스타일드 컴포넌트를 사용하면 컴포넌트와 스타일을 한 곳에서 관리할 수 있고, 재사용성을 높일 수 있습니다. 또한 한 컴포넌트의 스타일이 다른 컴포넌트에 영향을 주지 않게 되어 복잡한 상황을 예방할 수 있습니다.
 
next/image 관련 자세한 기능들은 추후 업데이트 할 예정입니다.