Components

<Image>

import Image from 'next/image'
 
export default function Page() {
  return (
    <Image
      src="/profile.png"
      width={500}
      height={500}
      alt="Picture of the author"
    />
  )
}

필수 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>
  )
}

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>
}

필수 Prop

• href : 탐색할 경로 또는 URL

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

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 (
    <>
    </>
  )
}

필수 Prop

**[src](<https://nextjs.org/docs/app/api-reference/components/script#src>) : 외부 스크립트의 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	-