Front-End

Next.js의 라우팅 개념 정리

봉의일상 2025. 5. 7. 18:13

Next.js는 파일 기반 라우팅(file-based routing) 시스템을 채택하고 있습니다. 이는 기존의 React Router처럼 별도 설정 없이, 폴더 구조만으로 자동으로 라우팅이 구성되는 방식입니다.

1. 기본 라우팅

src/app/page.jsx → /
src/app/about/page.jsx → /about
src/app/login/page.jsx → /login

각 디렉토리 안에 있는 page.jsx 파일이 해당 URL 경로와 매핑됩니다.

2. 동적 라우팅

Next.js에서는 대괄호([param]) 문법으로 동적 라우팅이 가능합니다.

src/app/posts/[id]/page.jsx → /posts/1, /posts/abc 등 다양한 id 값 허용

3. 중첩 라우트

디렉토리를 중첩시켜 라우트를 구성할 수 있습니다. 각 디렉토리에서 layout.jsx를 정의하면 해당 경로 이하의 모든 하위 페이지에 공통 레이아웃을 적용할 수 있습니다.

4. API 라우트

src/app/api/hello/route.js → /api/hello

Next.js는 API 라우팅을 위한 구조도 제공합니다. 간단한 백엔드 기능을 이 구조로 함께 개발할 수 있습니다.

5. 기타 관련 파일들

  • layout.jsx: 공통 레이아웃 정의
  • loading.jsx: 로딩 중 화면 정의
  • error.jsx: 에러 발생 시 렌더링할 컴포넌트
  • head.jsx: <head> 메타 태그 커스터마이징

결론

Next.js의 라우팅은 매우 직관적이며 유지보수에 강합니다. 코드를 분리하고 관리하기 좋으며, 디렉토리 구조만으로도 복잡한 웹페이지의 구성과 흐름을 명확하게 표현할 수 있습니다. 이는 규모가 커질수록 더욱 진가를 발휘합니다.