Public directory

• 이미지나 vercel 로고 등이 있었고, next.js 프로젝트안에서 특정 path를 주지않고 바로 접근 가능했다.
• 정적인 리소스 (robots.txt, images)

Image Component

• 두가지 이미지 노출 방식

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

<Image src="/images/profile.jpg" width={144} height={144} alt="jimmy" />

original img태그와 Next.js에 제공하는 Image 컴포넌트의 차이

• Next.js의 Image 컴포넌트를 사용했더니…. 기존 jpeg ⇒ webp로 이미지 파일 형식이 바뀌었다.

  • webp가 사진 용량도 적고 좋은 퀄리티를 제공한다.

  

• Next.js의 Image 컴포넌트를 사용했더니 viewport에 사진이 노출 되었을때 그때 이미지를 불러온다. (lazy-load)

<aside> 💡 resize, lazy-load, image optimization

</aside>

<aside> 💡 추가로 Image 컴포넌트에 사이즈를 줌으로써, 미리 이미지 사이즈를 계산하고, 레이아웃이 무너지지 않도록 CLS 기능도 제공한다.

</aside>

Styling

• 공통 컴포넌트를 만든다 Layout.js
• ./layout.module.css라는 CSS module을 만든다.
• .container라는 클래스 스타일을 정의하고 Layout.js에서 사용한다.