Link

링크 사용시 import를 해줘야 한다.

Link를 사용하면 파일 디렉토리에 맞춰 라우팅을 진행해준다.

Client Side Navigate → JS상에서 page 교체

PreFetching

import Link from "next/link"

<Link href="/posts/first-post">첫번째 포스트</Link>

Image

이미지 사용시 import를 해줘야 한다.

Image를 사용하면 파일 디렉토리에 맞춰 라우팅을 진행해준다.

해당 포맷은 image/webp 로 포맷팅이 되어 올라간다. (기존 img 태그를 사용시 jpeg 포맷으로 올라감)

Resizeing

lazy load (viewport에만 보이게 활성)

optimization (webp 형태)

import Image from "next/image"

<Image src="/images/profiles.jpeg" alt="sunki" width={340} height={240}/>