[React] Next.js 13

설치

해당 명령어로 설치, 선택지는 취향껏 선택해주되 App Router 는 Yes를 선택해줍니다.

npx create-next-app@latest 프로젝트명

라우팅

app 하위 경로에 입력한 폴더 명을 기준으로 라우팅 경로가 구성됩니다.

구성 요소로는 page 와 layout 두 가지가 있으며, 다음과 같이 정의할 수 있습니다.

• page - 경로에 접근했을 때, 사용자 화면에 보이는 페이지
• layout - 페이지를 둘러싸고 있는 레이아웃 컴포넌트

생성 예시 - create 페이지

next/Link

이제 하위 a 태그가 필요하지 않습니다. 기본적인 사용법은 아래 코드와 같습니다.

import Link from 'next/link';
 
export default function Home() {
  return (
    <ul>
      <li>
        <Link href="/">Home</Link>
      </li>
      <li>
        <Link href="/about">About Us</Link>
      </li>
      <li>
        <Link href="/blog/hello-world">Blog Post</Link>
      </li>
    </ul>
  );
}

next/Image

기본적인 사용법은 아래 코드와 같습니다.

import Image from "next/image";

export default function Home() {
    return (
        <>
            <Image
                  src='/next.svg'
                  width={394}
                  height={80}
                  alt='Next.js logo'
              />
        </>
    );
}

DOM Tree

기존 img 를 감싸던 span 속성이 삭제되어 스타일 수정이 더욱 간편해졌습니다.

변경된 DOM Tree

CLS(Cumulative Layout Shift)

placeholder 속성을 통해 이미지가 로드되기 전에도 이미지 크기만큼 영역을 표시해서 레이아웃이 흔들리지 않도록 할 수 있습니다.

<Image
    src='/next.svg'
    width={394}
    height={80}
    alt='Next.js logo'
    placeholder={blur}
/>