[Next.js] Next에서 정적(static) 파일 불러오기 ( feat. <Image> )

[Next.js] Next.js란? ( feat. <Link> )

⇧ Next.js 간단하게 알아보기 ⇧

---

Next에서 정적 파일 불러오기 

Next.js는 'public' 디렉토리에서 여러가지 정적 파일을 보관하고,

<Image> 태그를 사용하여 꺼내올 수 있습니다!

 

public 폴더 내부에 jpeg 파일 넣어주기

 

import Image from "next/image";

export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <Image src="/ye.jpeg" alt="ye" width="64" height="64" />
    </>
  );
}

FirstPost 접속시 화면

정적 파일 사용시 주의점

1. public 폴더에 저장된 파일의 이름과, pages 폴더에 저장된 파일의 이름이 같으면 안됩니다!
- Next가 두 파일을 구분할 수가 없어요 ㅠㅠ

( ex : public/hello, pages/hello.js - 확장자가 구분이 안되므로 같은 파일로 취급되어 오류 발생 )
- public/hello.txt, pages/hello.js 로 변경해야 오류가 발생하지 않습니다.

2. 빌드시에 public폴더에 있는 파일만 Next가 인식할 수 있습니다.
- 브라우저에서 사용되는 정적 파일들은, 이 방법으로 불러올 수 없어요

 

<Image>의 장점과 상세설명

 

일반 HTML을 사용하면 다음과 같이 사진을 추가합니다.

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

그러나 다음 내용을 수동으로 처리해야하죠.

• 다양한 화면 크기에서 이미지가 반응하는지 확인 
• 타사 도구 또는 라이브러리로 이미지 최적화
• 화면에 표시될때만 ( 뷰포트에 들어갈 때만 ) 이미지 로드

Next.js의 <Image>태그를 사용하면, 이를 자동으로 해결할 수 있습니다.

 

1. 이미지 최적화 ( 자동 크기 조절 )

최신 형식의 이미지 크기 변경 기능( WebP 등 )을 사용 할 수 있습니다. ( 브라우저에서 지원하는 경우 )
- 이렇게 하면 작은 화면을 가진 장치로, 큰 이미지를 전달하지 않아도 됩니다.

또, Next.js가 표시될 이미지 형식을 자동으로 선택하고, 브라우저에 전달할 수 있습니다.

자동 이미지 변경은 모든 이미지 소스에서 작동하고,
이미지를 CMS와 같은 외부 데이터 소스에서 불러오는(호스팅) 경우에도 최적화 할 수 있습니다

 

2. 이미지 빌드 최적화 ( 시간 단축 )

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

정적 사이트와는 달리, 10개의 이미지를 전송하든 1천만 개의 이미지를 전송하든 빌드 시간이 증가하지 않습니다.

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

이미지는 레이아웃 오류를 방지하여 렌더링됩니다. 
- 사용자 예상치 못하게, 레이아웃이 움직여 잘못된 행동을 하게 되는 것을 방지합니다.

( 개발자 환경과, 사용자 환경의 차이로 인해, 오류나 성능 저하가 눈에 띄지 않을 수도 있다. )