Next.js 14+ 앱 라우터 (App Router) 기초

Next.js 13부터 도입된 App Router는 디렉토리 구조 기반의 직관적인 라우팅(File-based Routing)과 서버 컴포넌트(React Server Components)를 완벽하게 지원하는 차세대 웹 아키텍처입니다. 폴더 이름이 곧 브라우저 URL 경로가 되며, page.tsx와 같은 특수 파일들을 통해 UI의 레이아웃과 뷰를 명시적으로 분리할 수 있습니다.

Next.js의 라우팅은 엄격한 규칙 하나를 따릅니다. "폴더 이름은 URL 경로가 되고, 그 경로가 화면에 보이려면 반드시 page.tsx 파일이 존재해야 한다."

• app/page.tsx ➔ / (메인 페이지)
• app/dashboard/page.tsx ➔ /dashboard
• app/dashboard/settings/page.tsx ➔ /dashboard/settings

만약 폴더를 만들었더라도 내부에 page.tsx가 없다면 해당 경로는 브라우저에서 접근할 수 없는 404가 됩니다. 이를 통해 컴포넌트, 스타일, 테스트 파일 등을 안전하게 같은 폴더 내에 배치할 수 있습니다 (Colocation 패턴).

블로그 포스트, 쇼핑몰 상품 상세 페이지처럼 미리 경로를 알 수 없는 경우 대괄호 [folderName]를 사용하여 동적 라우팅을 구현합니다.

• app/blog/[slug]/page.tsx ➔ /blog/react-guide, /blog/nextjs-tips 매칭
• 이 때 대괄호 안의 이름(slug)은 페이지 컴포넌트의 params 객체로 전달됩니다.
  const { slug } = await params;

프로젝트 규모가 커지면 연관된 페이지들을 묶어서 관리하고 싶지만, URL 경로가 길어지는 것은 원치 않을 수 있습니다. 이때 소괄호 (folderName)를 사용합니다.

소괄호로 감싼 폴더는 라우팅 구조를 그룹화하는 역할만 하며, 실제 브라우저 URL 경로에는 영향을 주지 않습니다. 주로 공통 레이아웃을 그룹별로 다르게 적용할 때 매우 유용합니다.

• app/(auth)/login/page.tsx ➔ /login
• app/(auth)/register/page.tsx ➔ /register
• app/(marketing)/about/page.tsx ➔ /about

폴더 안에 배치되는 특정 이름을 가진 파일들은 각자의 고유한 역할을 가집니다.