들어가기에 앞서
하단의 참고한 자료를 바탕으로 개인의 생각을 정리한 글이므로 오류가 있을 수 있습니다.
오류에 대한 피드백은 언제든지 환영합니다. 부디 댓글로 알려주시길 바랍니다. 감사합니다.
Next.js는 app directory를 통해 동적 세그먼트 및 유연한 라우팅 방식을 제공합니다. 이 글에서는 동적 세그먼트를 정의하고 활용하는 방법과 함께, 소괄호(())를 사용한 라우팅 처리 방식에 대해 알아보겠습니다.
동적 라우팅 처리
동적 라우팅을 구현하려면 대괄호([ ])를 사용하여 폴더 이름을 동적 세그먼트로 정의합니다. 예를 들어, app/blog/[slug] 경로를 생성하면 slug 값에 따라 동적으로 페이지를 렌더링할 수 있습니다.
동적 링크 생성
동적인 경로를 활용하면 아래와 같이 링크를 간단하게 생성할 수 있습니다.
tsx
코드 복사
import Link from 'next/link';
export default function BlogLinks() {
return (
<>
<p>
<Link href="/blog/post-1">Post 1</Link>
</p>
<p>
<Link href="/blog/post-2">Post 2</Link>
</p>
</>
);
}
TypeScript
복사
이로써 매번 고정된 경로(app/blog/post-1, app/blog/post-2)를 작성할 필요 없이, slug 값에 따라 동적으로 링크를 생성하고 처리할 수 있습니다.
동적 세그먼트와 명명된 경로의 우선순위
app/blog/post와 같은 고정된 폴더가 이미 존재한다면, Next.js는 이를 동적 세그먼트보다 우선적으로 인식합니다. 예를 들어:
•
app/blog/[slug]에서 slug 값이 post일 경우, app/blog/post 폴더가 우선적으로 매칭됩니다.
•
이를 통해 명명된 경로와 동적 경로를 효과적으로 구분하여 처리할 수 있습니다.
Route Group을 활용한 라우팅 처리
Next.js 13 이상에서는 소괄호를 사용하여 특정 경로나 파일을 렌더링에서 제외하거나, 유연한 디렉토리 구조를 설계할 수 있습니다.
사용 예시: 그룹화 폴더
소괄호는 파일 및 폴더를 실제 경로에서 제외하는 데 사용됩니다. 예를 들어:
app/
(auth)/
login/page.tsx
register/page.tsx
dashboard/
page.tsx
Shell
복사
•
/auth 그룹 폴더는 실제 URL 경로에 포함되지 않습니다. 즉, URL경로는 /login 혹은 /register 로 설정됩니다.
•
/dashboard 경로는 /auth 그룹 폴더와 상관없이 정상적으로 렌더링됩니다.
상태 관리 (loading, error)
Next.js에서 Route Groups를 사용하면 특정 경로에 대한 로딩 및 에러 처리를 별도로 분리하고 관리할 수 있습니다. 이는 대규모 프로젝트에서 경로 상태를 효율적으로 관리하는 데 유용합니다.
소괄호를 사용하여 특정 경로를 그룹화하면, 해당 그룹 내에서 loading.tsx와 error.tsx 파일을 생성해 상태를 처리할 수 있습니다.
디렉토리 구조 예시
app/
(auth)/
login/
page.tsx
register/
page.tsx
loading.tsx
error.tsx
dashboard/
page.tsx
loading.tsx
error.tsx
Shell
복사
위 구조에서:
•
(auth) 그룹은 /login과 /register 경로를 포함합니다.
•
그룹 레벨의 loading.tsx와 error.tsx는 /auth 관련 모든 경로의 로딩 및 에러 상태를 처리합니다.
loading.tsx와 error.tsx의 역할
1.
loading.tsx
그룹 내 모든 경로에서 데이터를 로드하거나 페이지를 준비하는 동안 보여줄 로딩 UI를 정의합니다.
export default function Loading() {
return <p>페이지를 불러오는 중입니다...</p>;
}
TypeScript
복사
2.
error.tsx
그룹 내에서 발생한 에러를 포괄적으로 처리할 수 있습니다. 에러를 잡아내고 사용자에게 안내 메시지를 제공하는 데 사용됩니다.
'use client';
export default function Error({ error, reset }: { error: Error; reset: () => void }) {
return (
<div>
<h2>에러가 발생했습니다.</h2>
<p>{error.message}</p>
<button onClick={reset}>다시 시도</button>
</div>
);
}
TypeScript
복사
•
reset 함수는 상태를 초기화하고 다시 시도할 수 있도록 제공합니다.
•
그룹별로 커스텀 에러 처리가 가능하므로, 페이지마다 다른 에러 UI를 제공할 수도 있습니다.
개별 경로와 그룹 경로의 상태 처리 우선순위
•
개별 경로(/dashboard/loading.tsx)가 정의되어 있으면 해당 경로의 상태 처리 파일이 우선됩니다.
•
그룹 레벨의 상태 처리 파일((auth)/loading.tsx)은 그룹 내 다른 경로에서 상태 처리 파일이 없을 때만 동작합니다.
Route Group을 활용한 이점
1.
중앙화된 상태 관리
각 경로의 상태 파일을 별도로 관리하지 않아도 그룹 레벨에서 처리할 수 있어, 코드 관리가 수월합니다.
2.
UI 재사용성 증가
그룹 내 모든 경로에 공통된 로딩/에러 UI를 적용할 수 있으며, 필요한 경우 개별 경로에서 이를 재정의할 수도 있습니다.
3.
유연한 구조 설계
Route Groups와 상태 파일을 결합하여 대규모 프로젝트에서도 유지보수 가능한 디렉토리 구조를 설계할 수 있습니다.
Next.js의 동적 라우팅과 소괄호를 활용하면 복잡한 구조의 앱을 더욱 유연하게 설계할 수 있습니다. 동적 세그먼트를 통해 간결하고 재사용 가능한 경로를 정의하고, 소괄호를 사용하여 디렉토리를 그룹화하거나 경로에서 제외할 수 있습니다.