Next Image 사용하는 방법

2024. 5. 14. 11:39· Stack/Next.js
목차
  1. Sample Code
  2. 외부 이미지 적용하는 법
반응형

Next Image 사용하는 방법

Next.js 에서는 별도의 Image 컴포넌트가 존재한다 .

Image 컴포넌트의 장점은 다음과 같다

  • 향상된 성능: 최신 이미지 형식을 사용하여 각 디바이스에 대한 올바른 크기의 이미지 제공
  • 시각적 안정성: 자동으로 layout shift 방지
  • 빠른 페이지 로드: 이미지가 뷰포트에 들어갈 때만 로드되며 placeholder 제공
  • 유연성: 원격 서버에 저장된 이미지에 대해서도 온디맨드 이미지 크기 조정

Sample Code

page.tsx 파일

import Image from "next/image";
import styles from "./imagepage.module.css";

const ImagePage = () => {
  return (
    <div className={styles.imgcontainer}>
      <Image className={styles.img} src="/ann.jpg" alt="" fill />
    </div>
  );
};

export default ImagePage;

imagepage.module.css 파일

.imgcontainer {
  position: relative;
  display: flex;
  width: 500px;
  height: 500px;
  background-color: red;
}

.img {
  object-fit: contain;
  /* object-fit: cover; */
}

  • position : relative 를 통해 크기를 맞춘다.
  • objectfit 을 통해 화면에 그림을 전부 덮을지(cover) 아니면 빈 부분이 생겨도 괜찮게 크기를 변경할지 선택 가능

외부 이미지 적용하는 법

Next Image 컴포넌트를 외부 이미지에 사용하기 위해서 는 next.config.mjs 파일을 수정시켜준다.

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/account123/**',
      },
    ],
  },
}

port 와 pathname은 생략 가능하다.

hostname 에서는 내가 가지고 올 이미지의 사이트의 주소를 가지고 온다 생각하면된다.

ex) example.com/photos/18965342.jpg 일 경우 example.com만 넣으면 된다.

반응형

'Stack > Next.js' 카테고리의 다른 글

Button으로 Resizable 구현하기  (0) 2024.06.04
Draggable 구현하기  (0) 2024.06.04
Next.js metadata 다루는 방식의 변  (0) 2024.05.14
📘 Next.js 에 markdown 설치 하기  (0) 2024.05.09
MongoDB 와 Next.JS 연결하기  (0) 2024.05.01
  1. Sample Code
  2. 외부 이미지 적용하는 법
'Stack/Next.js' 카테고리의 다른 글
  • Draggable 구현하기
  • Next.js metadata 다루는 방식의 변
  • 📘 Next.js 에 markdown 설치 하기
  • MongoDB 와 Next.JS 연결하기
WHITE_FROST
WHITE_FROST
개발공부리뷰블로그
반응형
WHITE_FROST
하얀하얀IT
WHITE_FROST
전체
오늘
어제
  • 분류 전체보기 (73)
    • Stack (43)
      • Next.js (7)
      • React (12)
      • React-Native (15)
      • TypeScript (0)
      • Python (2)
      • JavaScript (2)
      • Android (1)
      • DB (2)
      • JAVA (1)
    • Obsidian (0)
    • AI (1)
    • AI Tools (0)
    • Tools (0)
    • Mac (0)
    • Error (7)
    • 알고리즘 (4)
    • 공부일상 (8)
    • 개발 도구 & 라이브러리 (0)
    • 정보처리기사 (0)
    • 기타 (7)
    • Tip (2)

공지사항

인기 글

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
WHITE_FROST
Next Image 사용하는 방법
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.