[Next.js] Image

[Next.js] Link

위 포스팅에서 진행한 코드를 기반으로 진행 됩니다.

 

앞에서 추가한 두페이지에는 스타일이 없습니다. 페이지의 스타일을 지정하기 위하여 CSS를 추가 해보겠습니다.

Next.js에는 CSS 및 Sass에 대한 지원이 내장되어 있습니다. 이 과정에서는 CSS를 사용합니다.

추가적으로 title 태그와 같은 페이지 메타 데이터 및 이미지와 같은 정적 자산을 처리하는 방법에 대해서도 설명합니다.

 

Next.js는 최상위 디렉토리에서 이미지와 같은 정적 자산을 제공 할 수 있습니다.

---

1. 프로필 사진 다운로드

 

1) 프로필로 사용 할 이미지를 다운로드 받습니다.

2) public 디렉토리 안에 images 디렉토리를 생성합니다.

3) 다운로드 받은 사진을 public/images 디렉토리 안에 profile.jpg라는 이름으로 삽입합니다.

---

2. 최적화 되지 않은 이미지

 

일반적으로 HTML을 사용하여 이미지를 추가 할 때는 아래와 같이 사용합니다.

<img src="/images/profile.jpg" alt="Your Name" />

그러나 이것을 다음을 수동으로 처리해야 함을 의미합니다.

 

- 이미지가 다양한 화면 크기에서 반응하는 지 확인

- 타사 도구 또는 라이브러리리로 이미지 최적화

- 뷰포트에 들어갈 때만 이미지 로드

 

그러나 Next.js는 즉시 사용 가능한 Image라는 구성 요소를 제공합니다.

---

3. 이미지 구성 요소 및 이미지 최적화

 

next/image의 img 요소는 현태 웹을 위해 진화한 HTML 요소의 확장입니다.

 

Next.js는 기본적으로 이미지 최적화도 지원합니다.

이를 통해 브라우저에서 지원하는 경우 WebP와 같은 최신 형식의 이미지 크기 조정, 최적화 및 제공이 가능합니다.

이렇게 하면 뷰포트가 더 작은 장치에 큰 이미지를 배송하는 것을 방지 할 수 있습니다.

또한 Next.js가 미래의 이미지 형식을 자동으로 채택하고 해당 형식을 제원하는 브라우저에 제공 할 수 있습니다.

 

자동 이미지 최적화는 모든 이미지 소스에서 작동합니다.

이미지가 CMS와 같은 외부 데이터 소스에서 호스팅 되는 경우에도 여전히 최적화 할 수 있습니다.

---

4. 이미지 요소 사용

 

Next.js는 빌드 시 이미지를 최적화 하는 대신 사용자가 요청 할 때 주문형으로 이미지를 최적화합니다.

이로써 정적 사이트 생성기 및 정적 전용 솔루션과 달리

10개의 이미지를 배송하든 1천만 개의 이미지를 배송하든 빌드 시간이 증가하지 않습니다.

 

이미지는 기본적으로 지연 로드 됩니다. 즉, 뷰포트 외부의 이미지에 대해서는 페이지 속도에 영향을 미치지 않습니다.

이미지 뷰포트로 스크롤 될 때 로드됩니다.

 

다음은 이미지 요소를 사용하는 방법입니다.

 

1) 이미지를 사용하고자 하는 .js 상단에 아래와 같이 next/image를 import 해옵니다.

import Image from 'next/image'

 

2) Image 요소 속성에 src, height, width, alt 속성을 설정 해줍니다.

(src 속성에 이미지 파일 로드 시 ../public/images 작성 시 오류가 발생합니다.)

import Link from "next/link";
import Image from "next/image";

export default function Home() {
  return (
    <h1 className="title">
      <Image
        src="/images/profile.jpg"
        width={100}
        height={100}
        alt="루피"
      ></Image>
      Learn{" "}
      <Link href="/posts/first-post">
        <a>Next.js!</a>
      </Link>
    </h1>
  );
}

---

Learn | Next.js