next/image
- Next.js에서 이미지를 최적화 해주는 컴포넌트
- 전달하는 것들이 많다.
next/image | Next.js
-
requierd
- src : 파일자체를 import 가능 (관련된 도메인들은 next.config.js에 추가해야한다.)
- width :
- height
- width 와 height를 주는 이유 CLS를 최소화 하기 위함
-
optional
- responsive : vw로 줘야한다.
- fill
- loader : 이미지를 로더할때 표시해줄것
- sizes : default는 100vw
- quality : next/image 는 퀄리티를 포기하더라도 최적하된 이미지를 보여주려고한다.
- proority
- placeholder :
- blur : 블러였다가 뜸
- color effect
next/Script
next/script | Next.js
- stragegy 프로퍼티가 있다.
- onLoad 프로퍼티
- onError 프로퍼티
next/Head
<Head>
<title>My page title</title>
<meta property="og:title" content="My page title" key="title" />
</Head>
<Head>
<meta property="og:title" content="My new title" key="title" />
</Head>
- key값을 줘서 duplicate를 막을 수 있다.