Development Vlog

Image 컴포넌트의 장점자동 최적화 : 이미지 크기, 형식, 품질을 최적화하여 페이지 로딩 속도를 개선.지연 로딩(Lazy Loading) : 화면에 보이는 이미지부터 로딩, 초기 렌더링 시간 단축.반응형 크기 지원 : 다양한 뷰포트 크기에 따라 적절한 크기의 이미지를 로딩.캐싱 지원 : CDN을 통해 효율적인 이미지 제공기본 사용법`Image` 컴포넌트는 `next/image`에서 제공되며, 아래와 같은 형태로 사용됩니다.import Image from 'next/image'; 필수 Propsrc : 이미지의 경로(URL 또는 로컬 경로)alt : 이미지 대체 텍스트, 접근성(웹 접근성 표준)을 위해 필수 추가 Propwidth, height : 픽셀 단위로 이미지 크기를 설정fill : 부모 요소에..

컴포넌트``는 Next.js에서 페이지 간의 빠르고 부드러운 전환을 제공하는 컴포넌트입니다.HTML의 `` 태그를 대신 사용하며, 페이지 전체를 새로고침하지 않도록 최적화합니다.import Link from 'next/link';export default function Page() { return 홈페이지로 이동;}useRouter Hook`useRouter`를 통해 URl 쿼리와 페이지 전환을 제어할 수 있습니다.1) 쿼리 값 가져오기Params 값 : 파일명 `[id].js`에 따라 동적으로 URL의 값을 참조합니다.import { useRouter } from 'next/router';export default function Product() { const router = useRouter(..