Next.js 15 이미지 등록하고 사용하기

목차

1. 이미지 경로

2. 코드 수정

---

 

이번 포스트에서는 Next.js에서 이미지를 등록하고 활용하는 방법에 대해 소개합니다. 

next/image 컴포넌트를 사용하여 로컬 이미지 파일을 등록하고 웹 페이지에 최적화된 상태로 표시하는 법을 다룹니다.

예제로 로고 이미지를 클릭 시 홈으로 이동하는 기능을 구현하며, 이미지 속성 설정 및 스타일링을 Tailwind CSS와 함께 사용하는 방법을 보여줍니다.

 

1. 이미지 경로

- 이미지의 경로는 public 폴더에서 img라는 폴더를 사용하며, 사용할 이미지를 복사해서 붙여넣습니다.

 

2. 코드 수정

- next/image컴포넌트를 사용하여 예제코드를 작성하겠습니다.

- css는 tailwind css이며, 이벤트는 홈으로 가는 이벤트입니다.

import Image from "next/image";
import logoImage from "/public/img/logo.png";
import React, { useCallback } from "react";
import { useRouter } from "next/navigation";

const Logo = () => {
  const router = useRouter();
  const onClickHandler = useCallback(() => {
    router.push("/");
  }, []);

  return (
    <div className={"flex flex-col"}>
      <Image
        src={logoImage}
        width={139}
        height={120}
        alt="Logo"
        onClick={onClickHandler}
        className={"cursor-pointer"}
      />
      <div className={"flex justify-center pt-4 text-base"}>
        보듬이의 블로그
      </div>
    </div>
  );
};

export default React.memo(Logo);

 

- 공식문서에서 이미지 컴포넌트는 src, width, height, alt를 필수 값을 가집니다.

src	src="/profile.png"	String	Required
width	width={500}	Integer (px)	Required
height	height={500}	Integer (px)	Required
alt	alt="Picture of the author"	String	Required

 

- 확인

 

* 함께 보면 좋은 글

공식 문서 : https://nextjs.org/docs/app/api-reference/components/image

 

 

 

 

* 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.