Next.js Image 컴포넌트 정리

Next/Image란 Next.js에서는 이미지를 효율적이게 처리하고 최적화 하기 위해 제공해주는 Image 컴포넌트입니다.. 이미지를 최적화하여 페이지 로딩 속도를 개선하고, 사용자 경험을 향상 시킬 수 있기에 사용을 권장합니다. 예시) import Image from 'next/image'; Next/Image 컴포넌트 속성 속성명 설명 예시 src 표시할 이미지 파일 경로 또는 URL src="/images/test.svg" width 이미지 너비 width={500} height 이미지 높이 height={500} alt 이미지 대체 텍스트, 설명 alt="멋진 이미지" loader 이미지 로딩 방식을 설정하는 함수 loader={imageLoader} fill 이미지를 크기에 맞게 자동으로 채울..

• format_list_bulleted NEXT.JS
• · 2023. 11. 19.
• textsms

Next.js useRouter 정리

router 객체 요소 router를 콘솔로 찍어보면 아래와 같은 객체요소들이 있다 asPath - string - basePath 또는 locale 없이 브라우저에 표시되는 경로 (쿼리포함) basePath - string - 활성 basePath (활성화 된 경우) defaultLocale - string - 현재 기본 locale (활성화 된 경우) isFallback - boolean - 현재 페이지가 fallback 모드인지 여부 isPreview - boolean - 앱이 현재 미리보기 모드인지 여부 isReady - boolean - 라우터 필드가 클라이언트 측에서 업데이트되고 사용할 준비가 되었는지 여부. useEffect 메소드 내에서만 사용해야하며 서버에서 조건부로 렌더링 하는 데에 사..

• format_list_bulleted NEXT.JS
• · 2023. 10. 15.
• textsms

Next.js에서 npm run dev 오류 해결 (SyntaxError: Unexpected token '??=')

오류내용 SyntaxError: Unexpected token '??=' at wrapSafe (internal/modules/cjs/loader.js:988:16) at Module._compile (internal/modules/cjs/loader.js:1036:27) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10) at Module.load (internal/modules/cjs/loader.js:937:32) at Function.Module._load (internal/modules/cjs/loader.js:778:12) at Module.require (internal/modules/cjs/loader.js:9..

• format_list_bulleted NEXT.JS
• · 2023. 8. 21.
• textsms