Components

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="/profile.png"
      width={500}
      height={500}
      alt="Picture of the author"
    />
  )
}
Plain Text
복사

필수 Props

src : 이미지 경로

width : 길이

height : 높이

alt : 정보

import Image from 'next/image'

export default function Page() {
  return (
    <div>
      <Image
        src="/profile.png"
        width={500}
        height={500}
        alt="Picture of the author"
      />
    </div>
  )
}
Plain Text
복사

Props

Prop	Example	Type	Required
src	src="/profile.png"	String	Yes
width	width={500}	Integer (px)	Yes
height	height={500}	Integer (px)	Yes
alt	alt="Picture of the author"	String	Yes
loader	loader={imageLoader}	Function	\-
fill	fill={true}	Boolean	\-
sizes	sizes="(max-width: 768px) 100vw"	String	\-
quality	quality={80}	Integer (1-100)	\-
priority	priority={true}	Boolean	\-
placeholder	placeholder="blur"	String	\-
style	style={{objectFit: "contain"}}	Object	\-
onloadingcomplete	onLoadingComplete={img => done())}	Function	\-
onload	onLoad={event => done())}	Function	\-
onerror	onError(event => fail()}	Function	\-
loading	loading="lazy"	String	\-
blurdataurl	blurDataURL="data:image/jpeg..."	String	\-

<Link>

HTML 요소를 확장하여 경로 간 프리페칭 및 클라이언트 측 탐색을 <a>제공하는 React 구성 요소.

import Link from 'next/link'

export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}
Plain Text
복사

필수 Prop

•

href : 탐색할 경로 또는 URL

// Navigate to /about?name=test
<Link
  href={{
    pathname: '/about',
    query: { name: 'test' },
  }}
>
  About
</Link>
Plain Text
복사

Prop

Prop	Example	Type	Required
href-required	href="/dashboard"	String or Object	Yes
replace	replace={false}	Boolean	\-
prefetch	prefetch={false}	Boolean	\-
<a> tag prop	style, className	Other	\-

•

replace : 기본값 false. ture면 next/link에서 브라우저 기록에 새 URL을 추가하는 대신 현재 기록 상태를 대체

•

prefetch : 기본값 true. true면 백그라운드에서 next/link페이지( href 링크)를 사전에 불러옴

<Script>

여러 경로에 대한 타사 스크립트를 로드하려면 next/script스크립트를 가져오고 레이아웃 구성요소에 직접 포함해야함

import Script from 'next/script'

export default function Dashboard() {
  return (
    <>
    </>
  )
}
Plain Text
복사

필수 Prop

Components: <Script> : 외부 스크립트의 URL을 지정하는 경로 문자열

Prop

Prop	Example	Type	Required
src	src="http://example.com/script"	String	Required unless inline script is used
strategy	strategy="lazyOnload"	String	\-
onload	onLoad={onLoadFunc}	Function	\-
onready	onReady={onReadyFunc}	Function	\-
onerror	onError={onErrorFunc}	Function	\-