Next.js (2) 썸네일형 리스트형 Next.js ImageComponent 사용하기 는 HTML의 태그에서 확장되어 built-in을 최적화하는 Next.js의 이미지 컴포넌트이다. Next.js 공식문서에서 설명하는 컴포넌트 사용의 의의는 아래와 같다. Improved Performance : modern image format을 사용해서 각각의 디바이스에 맞는 적절한 이미지 사이즈를 제공 Visual Stability : Cumulative Layout Shift(누적 레이아웃 이동) 이 발생하지 않도록 안정성을 보장 Faster Page Loads : 뷰포트에 들어갈때만 이미지가 로드된다. Asset Flexibility : remote 서버(클라우드, CMS 등)에 저장된 이미지도 리사이징이 가능 import Image from 'next/image' import profile .. Next.js styled-components compile error 해결 Next.js에서 styled-components를 사용하는데 새로고침 할 때 마다 다음과 같은 에러를 발생했습니다. Next.js 12버전부터 babel 대신 swc를 사용하여 컴파일하도록 변경되었기 때문입니다. .babelrc가 있다면 babel을 사용하게 되므로 아예 babelrc를 제거한 다음, next.config.js 에서 styledComponents 설정만 해주면 swc를 사용하면서 문제를 해결할 수 있습니다. 이전 1 다음
