Next js의 App Router

라우팅

13버전 이전에는 Pages Router를 사용했으나 13버전 부터 App Router가 소개되었습니다. app 디렉터리에서 작동하며 호환성을 위해 pages 디렉터리와 나란히 동작하는 것이 가능하다고 합니다. app 디렉터리 내부의 컴포넌트는 React Server Components입니다.

디렉터리 단위로 url을 구성할 수 있는 것은 이전 방식과 동일합니다.

App Router 사용 시

app/
	board/
    	page.tsx
       	article/
        	[id]/
            	page.tsx

Page Router 사용 시

pages/
	board/
    	index.tsx
       	article/
        	[id].tsx

App Router에서는 파일 이름에 따라 역할이 정해진 것이 있습니다. 다음은 파일 이름과 그 용도입니다.

• layout.tsx
  : 하위 url에도 적용되는 공유 UI
• page.tsx
  : 현재 route에 해당되는 UI
• loading.tsx
  : 하위 url에도 적용되는 로딩 UI
• not-found.tsx
• error.tsx
• global-error.tsx
• route.tsx
  : 서버 사이드 API 엔드포인트
• template.tsx
  : layout과 유사하지만 route를 이동할 때 상태를 유지하지 않는 컴포넌트
• default.tsx
  : Paraller Route의 Fallback UI

해당 파일의 계층 구조는 다음과 같습니다.

<Layout>
	<Template>
    	<ErrorBoundary fallback={<Error />}>
        	<Suspense fallback={<Loading />}>
            	<ErrorBoundary fallback={<NotFound />}>
                	<Page />
                </ErrorBoundary>
            </Suspense>
        </ErrorBoundary>
    </Template>
</Layout>

만약 디렉터리 구조가 아래와 같다면

/dashboard
	layout.tsx
    error.tsx
    loading.tsx
    
    settings/
    	layout.tsx
        error.tsx
        loading.tsx
        page.tsx

컴포넌트 구조는 아래와 같이 중첩 구조로 구성됩니다

<Layout>
	<ErrorBoundary fallback={<Error />}>
    	<Suspense fallback={<Loading />}>
        	<Layout>
				<ErrorBoundary fallback={<Error />}>
    				<Suspense fallback={<Loading />}>
        				<Page />
        			</Suspense>
    			</ErrorBoundary>
			</Layout>
        </Suspense>
    </ErrorBoundary>
</Layout>

기타 라우팅 패턴

• Paraller Routes: 2개 이상의 페이지를 같은 뷰에 보여줍니다.
• Intercepting Routes: 라우트를 인터셉트해서 다른 라우트의 컨텍스트에서 보여줄 수 있습니다. 편집 기능 사용 중 다른 뷰 보기, 사진 펼쳐보기 등 현재 페이지의 컨텍스트가 더 중요한 경우 사용할 수 있습니다.