Development Vlog

Next.js에서 Google Fonts를 활용하는 방법많은 웹 사이트에서 Google Fonts를 활용하고 있습니다. Next.js는 Google Fonts를 손쉽게 사용하고 최적화할 수 있는 기능을 제공합니다.Google Fonts 설정하기패키지 import 및 객체 생성// /pages/_app.jsimport { Noto_Sans_KR } from '@next/font/google';const notoSansKR = Noto_Sans_KR({ weight: ['400', '500', '700'], // 사용할 폰트 굵기 설정}); `weight` : 폰트 굵기를 문자열 형태로 지정폰트 적용하기1. 클래스 이름을 사용하여 적용생성된 폰트 객체의 `className` 속성을 활용하여 특정 요소에 폰..

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(..