Link

Next.js는 Link의 페이지를 미리 불러온다.

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">Home</Link>
      </li>
      <li>
        <Link href="/about">About Us</Link>
      </li>
      <li>
        <Link href="/blog/hello-world" preload={false}>Blog Post</Link>
      </li>
    </ul>
  )
}
export default Home

Next.js로 페이지를 구성할 시 Link를 사용해서 네비게이션을 구축할 경우 뷰포트의 모든 항목을 미리 가져온다.
이는 preload={false} 속성을 통해 비활성화 할 수 있다.

Link의 href는 객체로도 전달이 가능하다.

import Link from 'next/link'

function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link
            href={{
              pathname: '/blog/[slug]',
              query: { slug: post.slug },
            }}
          >
            {post.title}
          </Link>
        </li>
      ))}
    </ul>
  )
}

export default Posts

Link에 경로를 부여할 때는 문자열 뿐만 아니라 객체 형식으로도 전달이 가능하다.

Static Asset

Image 컴포넌트를 통한 이미지 최적화

사용자에게 이미지를 제공할 때 최적화 과정을 거치지 않는다면 UX적인 측면과 SEO 측면에서 악영향을 끼친다.
이미지의 로딩 유무로 레이아웃이 변경되는 경우가 이에 해당되는데 이를 누적 레이아웃 이동(CLI) Cumulative Layout Shift 이라고 한다.

누적 레이아웃 이동에 대한 적절한 예시 ex) 출처: Cumulative Layout Shift(누적 레이아웃 이동, CLS) - web.dev

이러한 현상을 방지하기 위해 Next.js에서는 Image 컴포넌트를 활용해 이미지 최적화를 적용시킬 수 있다.

import Image from 'next/image'

const MyImage = (props) => {
  return (
    <Image
      src="me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

또한 Next.js에서 Image를 사용할 시 자동으로 webp 확장자로 변환된다.