
Next.js - Assets, Metadata, CSS
·
✏️ Study/🔭 Next.js
📍/public - root의 /public는 /pages 처럼 앱 내에서 참조 가능 - /public 폴더에는 이미지같은 static assets을 보관 📍기존 이미지 로드 방식의 한계 엘리먼트는 아래 사항을 직접 조절해야 함 - 사이즈 크기에 따라 이미지 크기를 직접 조절 (반응형 대응) - 이미지 최적화를 위해 타사 라이브러리를 사용 - viewport에 들어올 때만 이미지 로딩 가능 📍Image 컴포넌트 - 예시 import Image from 'next/image'; const YourComponent = () => ( ); 디폴트 옵션 - 리사이징, 최적화 및 다양한 포맷 지원 - 빌드 타임에 최적화하지 않고 요청받을 때 최적화 실행 (따라서 일반적 ssg에 비해 빌드 타임이 증가하지 않음 -..