Nextjs 13에서 페이지 라우팅 방법

Nextjs 13 부터는 폴더기반의 페이지 라우팅 방법을 제공합니다.

기존에는 page 폴더 밑에 파일을 만들어서 라우팅을 제공했다면, 이제는 app 폴더 밑에 각 폴더별로 정의함으로써 layout, page 의 정의를 명확하게 할 수 있게 되었다.

app 바로 밑에 있는 layout.tsx 는 루트 레이아웃으로 필수이며, 하위 list 폴더에 layout 은 루트 레이아웃 아래에 포함된 layout 으로 만들어지게 된다. 

또한, list 아래 page.tsx 를 만들면 {pageUrl}/list 로 접근할 수 있는 라우팅이 만들어지게 된다.

import Link from "next/link";

const List = () => {
  return (
    <div>
      <h4>list 페이지</h4>
      <Link href="/list/item1">list 밑에 있는 item1 페이지 가기</Link>
    </div>
  );
};

export default List;

import Link from "next/link"; 를 사용해서 nest link 를 만들 수 있고 다음과 같이 사용하여 페이지 이동을 할 수 있다.