[Next] Next.js 13 라우팅 (1)

공식문서

1. 라우팅이란?

라우팅(Routing)은 요청한 URL 경로에 따라 어떤 내용을 보여줄지, 경로에 맞는 콘텐츠를 보여주기 위해 라우팅을 사용한다.

 

리액트에서 라우팅을 하려면 React Router 라이브러리를 이용해서 관리해야했지만, 

Next에선 app폴더 안에 또 다른 폴더를 생성하면 그 폴더의 이름 기반으로 자동으로 라우팅 처리를 해준다.

 

예를 들어 위 처럼 app 폴더 안에 blog, dashboard 폴더가 있고 dashboard 폴더 안에 setting 폴더가 있다고 할 때 

라우팅 경로는 아래처럼 /dashboard/setting생성이 된다.

 

도메인 다음에 오는 Path(경로)는 '/'로 시작해서 서브 디렉토리나 파일 경로를 나타내고

Segment는 경로를 조각으로 나타낸 것, '/'로 나누어진 부분으로 "dashboard", "settings" 을 말한다.

 

라우팅 경로를 설정하기 위해서 폴더를 만들었고, 이제 그 폴더 안에 파일을 생성해서 레이아웃을 작성하면

해당경로로 들어갔을 때 작성한 레이아웃을 확인할 수 있다.

 

2.  앱 라우터

위 처럼 app 폴더에서 dashboard안에 settings 폴더를 만들어 서로 중첩된 경로를 만들 수 있는데

중첩된 경로에서 특정 동작을 하는 UI를 만들기 위해 파일 규칙을 제공한다.

• layout:  Segment와 그 자식들에게 공유된 UI를 생성하는 데 사용 (레이아웃, nav 등 layout이 page를 감싸고 있음)
• page: 특정 라우트에 고유한 UI 생성해서 라우트를 공개적으로 접근이 가능하게 만들기
• loading: Segment와 그 자식들에게 로딩 표시 정의
• not-found: 사용자가 잘못된 경로에 접근하여 Segment와 자식들을 보여줄 수 없을 때 정의
• error: 데이터를 불러오지 못해 Segment와 자식들에 대한 에러처리
• global-error: 전체에 적용되는 global error 처리 정의
• route: 서버를 불러오거나 처리하는 등의 로직을 포함하는 API 엔드포인트 정의
• template: 특수하게 재렌더링할 레이아웃 UI 정의
• default: 여러 경로에 공유하는 콘텐츠를 설정할 병렬 라우트 UI 정의 

 

위 파일 외에도 사용자 정의 파일 (컴포넌트, 스타일, 테스트 등)을 폴더 안에 함께 두는 옵션을 제공한다.