[next] Routing Conventions

Next 13 App router - Routing Conventions

nextjs는 file system based 라우팅 방식입니다. 즉, 프로젝트의 폴더와 파일 구조에 따라서 라우팅 경로가 결정됩니다.

예시

위와 같은 프로젝트 구조라면 localhost:3000에서 실행했을 때 다음과 같이 라우팅 됩니다.

localhost:3000	app 폴더의 layout, page 실행
localhost:3000/product	app/product 폴더의 (layout), page 실행
localhost:3000/user	app/user 폴더의 (layout), page 실행

참고로 이미지에 있는 favicon.ico, globals.css와 같이 위의 Routing conventions에 없는 파일은 경로로 인식하지 않습니다.

1. layout, page

특정 폴더의 경로대로 url이 입력되면 그 폴더의 라우팅 컨벤션 파일들이 역할에 맞게 실행됩니다. 많은 파일들이 있지만, 기본이 되는 파일은 layout과 page입니다. url이 입력되었을 때 layout 컴포넌트의 children으로 page 컴포넌트가 삽입되어 렌더링 됩니다.

1-1. page 컴포넌트

해당 페이지에서 렌더링 할 컴포넌트입니다. 여기서 원하는 기능을 수행하는 컴포넌트를 생성합니다.

1-2. layout 컴포넌트

page 컴포넌트를 감싸는 wrapper 컴포넌트입니다. 여기서 주로 UI 레이아웃을 구현해 줍니다.

wrapper 컴포넌트를 따로 둔 이유는?

layout은 해당 폴더의 하위폴더에도 공통으로 적용됩니다. 따라서 하위 폴더로 라우팅을 할 때, 혹은 하위 폴더 간에 라우팅을 할 때 layout 컴포넌트를 재사용할 수 있습니다. (자동으로 재사용됩니다)

예시

위와 같이 product 폴더 안에 detail, list 폴더가 있을 때

localhost:3000/product/detail 페이지에서 localhost:3000/product/list 페이지로 이동할 때에는 product 폴더의 layout이 재사용됩니다. 즉, 서버에 layout 코드는 재요청하지 않고, list의 page 컴포넌트만 요청합니다.

이러한 이유로 root layout(app 폴더의 layout)은 모든 폴더의 상위에 존재하기 때문에 '모든' 페이지에서 재사용됩니다.

root layout코드를 보면 아래와 같이 생겼는데

app/layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>{children}</body>
    </html>
  )
}

html과 body는 모든 요소의 상위로 존재하니 모든 페이지에서 재사용된다는 것이 합리적입니다.

1-3. layout 컴포넌트 사용 시 참고사항

root layout은 무조건 존재해야 합니다.
하위 폴더의 layout은 선택사항입니다. 위 이미지의 detail과 list 폴더에는 layout 파일이 없습니다.
이 컴포넌트에서는 search param을 확인할 수 없습니다. layout 컴포넌트는 페이지 url이 바뀌어도 재사용으로 인해 이전 렌더링 결과를 재사용하는 경우가 있습니다. 따라서 search param이 바뀌었는데 이전 결과를 재사용하게 되면 런타임 에러가 발생할 수 있으므로, 애초부터 search param을 아예 쓰지 못하도록 만들어졌습니다. 참고로 search param은 각 page 컴포넌트에서 props로 확인이 가능합니다.

2. 다른 Routing file 들은?

구현 선택사항입니다. 필요하다면 하나씩 추가할 수 있습니다.

loading - 렌더링에 시간이 많이 소요되는 페이지(data fetching)라면 필요할 수 있음.
error - 에러 발생 시 보여줄 페이지
이하 생략.

저작자표시

'nextjs 13 App router' 카테고리의 다른 글

[next] Data 요청, Next fetch API (0)	2023.11.01
[next] App router (1)	2023.10.29

정재우의 개발 블로그

[next] Routing Conventions