Nextjs Routing(Router, Dynamic Routes, Route Group)

 

용어

트리(Tree): 계층 구조를 시각화하는 데 사용되는 관례. 예를 들어, 부모 및 자식 컴포넌트로 구성된 컴포넌트 트리, 폴더 구조 등이 있다.

서브트리(Subtree): 새로운 루트(첫 번째)에서 시작하여 리프(마지막)에서 끝나는 트리의 일부분.

루트(Root): 트리 또는 서브트리의 첫 번째 노드, 즉 루트 레이아웃.

리프(Leaf): 자식이 없는 서브트리의 노드, 즉 URL 경로에서의 마지막 세그먼트.

URL 세그먼트: 슬래시로 구분된 URL 경로의 일부입니다.

URL 경로: 도메인 뒤에 오는 URL의 일부(세그먼트로 구성)

 

app Router

Next.js의 13 버전에서는 React Server Components를 기반으로 한 새로운 App Router가 소개되었다. 이 새로운 라우터는 공유된 레이아웃, Neste Routes, 로딩 상태, 오류 처리 등을 지원한다.

App Router는 pages 디렉토리와 함께 작동하는데, 이를 위해 새로운 디렉토리인 app이 도입되었다. 이 app 디렉토리를 통해 점진적인 적용이 가능하며, 이전 동작을 유지하면서 애플리케이션의 일부 라우트를 새로운 동작으로 전환할 수 있다.

 

경로 생성

Next.js는 파일 시스템 기반의 라우터를 사용하며, 여기서 폴더는 라우트를 정의하는 데 사용된다. 각 폴더는 URL 세그먼트에 매핑되는 라우트 세그먼트를 나타낸다. Nested Routes를 만들려면 각 폴더를 서로 중첩시켜 생성하면 된다. 예를 들어, app 디렉토리에 두 개의 새로운 폴더를 중첩하여 /dashboard/settings 라우트를 추가할 수 있다. 

 

파일 규칙

layout : 세그먼트 및 해당 하위 항목에 대한 공유 UI

page : 경로의 고유한 UI 및 경로에 공개적으로 액세스 가능

loading : 세그먼트 및 해당 하위 항목에 대한 UI 로드 중

not-found : 세그먼트 및 해당 하위 항목에 대한 UI를 찾을 수 없음.

error : 세그먼트 및 해당 하위 항목에 대한 오류 UI

global-error : 전역 오류 UI

route : 서버 측 API 엔드포인트

template : 전문적으로 다시 렌더링된 레이아웃 UI

default : 병렬 경로에 대한 대체 UI

 

구성요소 계층

경로 세그먼트의 특수 파일에서 정의된 React 컴포넌트들은 특정한 계층 구조로 렌더링된다.

 

중첩 경로에서는 세그먼트의 구성 요소가 상위 세그먼트의 구성 요소 내에 중첩된다 .

 

Colocation

특수 파일뿐만 아니라, 앱 디렉토리 안의 폴더들 내에서 자신의 파일들(예: 컴포넌트, 스타일, 테스트 등)을 코로케이트할 수 있는 옵션이 있다. 

이는 폴더들이 라우트를 정의하지만, page.js 이나 route.js에 의해 반환되는 내용물만이 공개적으로 접근 가능하기 때문이다.

 

고급 라우팅 패턴

앱 라우터는 고급 라우팅 패턴을 구현하는데 도움이 되는 일련의 관례들을 제공한다.

Parallel Routes : 두 개 이상의 페이지를 동시에 같은 뷰에 표시하며, 각각 독립적으로 탐색할 수 있게 한다. 자신의 하위 네비게이션이 있는 분할 뷰에 사용할 수 있다. 예를 들어, 대시보드.

Intercepting Routes : 경로를 가로채서 다른 경로의 맥락에서 표시할 수 있다. 현재 페이지의 컨텍스트를 유지하는 것이 중요할 때 이를 사용할 수 있습니다. 예: 하나의 작업을 편집하거나 피드에서 사진을 확장하는 동안 모든 작업을 봅니다.

이러한 패턴들은 더 풍부하고 복잡한 UI를 구축할 수 있게 해주며, 작은 팀과 개별 개발자들이 역사적으로 복잡했던 기능을 더 쉽게 구현할 수 있도록 한다.

 

연결 및 탐색

Next.js에서 경로간 탐색하는 방법에는 3가지가 있다.

• Link Component
• useRouter Hook
• native History API

Link Component

<Link>는 HTML <a> 태그를 확장하여 prefetching 및 클라이언트 측에서 라우트 간 탐색을 제공하는 내장된 컴포넌트다. Next.js에서 라우트간 이동을 위한 주요하고 권장되는 방법이다.

import Link from "next/link";

export default function Page(){
    return (
        <Link href="/dashboard/settings">settings</Link>
    )
}

 

useRouter Hook

useRouter 훅을 사용하면 클라이언트 컴포넌트에서 라우트를 프로그래밍적으로 변경 할 수 있다. 서버 컴포넌트의 경우에는 redirect 대신 사용한다.

'use client'
import {useRouter} from "next/navigation";

export default function Page(){
    const router = useRouter()

    return (
        <button type="button" onClick={() => router.push('/dashboard')}>
            Dashboard
        </button>
    )
}

 

native History API

Next.js는 네이티브 window.history.pushState 및 window.history.replaceState 메서드를 사용하여 페이지를 다시로드하지 않고 브라우저의 히스토리 스택을 업데이트할 수 있다.

 

Dynamic Routes

미리 정확한 세그먼트 이름을 알 수 없고 동적 데이터에서 라우트를 생성하고 싶을 때, 요청 시 채워지거나 빌드 시 미리 렌더링된 동적 세그먼트를 사용할 수 있다.

 

[board]와 같이 대괄호로 감싸서 폴더를 생성하고 'dashboard/settings/board1'으로 요청 시

export default function Page({ params }: { params: { board: string } }) {
    return <div>My Post: {params.board}</div>
}

params board 값을 사용하여 board1값을 받을 수 있다.

 

Catch-all Segments

동적 세그먼트는 대괄호 내에 점 세 개([...folderName])를 추가하여 해당 세그먼트 이후의 모든 세그먼트를 포함할 수 있다.

위와 같이 board에 ...을 추가하고 '/dashboard/settings/board1/board2'로 요청 시 params.board 값은 board1board2로 출력된다.

Route	params Type Definition
dashboard/settings/[board]/page.js	{ board: string }
dashboard/settings/[...board]/page.js	{ board: string[] }
dashboard/settings/[[...board]]/page.js	{ board?: string[] }
dashboard/[settings]/[board]/page.js	{ settings: string, board: string }

 

Route Groups

앱 디렉터리에서 중첩된 폴더는 일반적으로 URL 경로에 매핑된다. 그러나 Route Group으로 폴더를 지정하여 해당 폴더가 라우트의 URL 경로에 포함되지 않도록 할 수 있다.

이를 통해 URL 경로 구조에 영향을 미치지 않고 라우트 세그먼트와 프로젝트 파일을 논리적인 그룹으로 구성할 수 있다.

위와 같이 폴더를 구성하고 /dashboard/settings/board로 요청한 경우 boardgroup폴더는 경로에 포함되지 않아 board page로 접근이 가능해진다.