Antigravity Agent
2.9 KiB
2.9 KiB
Next.js File Naming and Routing
📌 Brief Summary
Next.js는 특정 파일 이름이 애플리케이션의 라우트와 UI 상태를 결정하는 파일 기반 라우팅 시스템을 사용합니다 [1]. 핵심 파일인 page.js, layout.js, error.js, loading.js를 통해 라우트, 공유 레이아웃, 에러 처리 및 로딩 상태를 정의합니다 [1]. 운영체제 간 호환성과 가독성을 위해 파일 이름에는 kebab-case를, 컴포넌트 이름에는 PascalCase를 사용하는 엄격한 명명 규칙을 따르는 것이 프론트엔드 확장성과 유지보수를 위해 필수적입니다 [1-3].
📖 Core Content
- 핵심 라우팅 파일: Next.js의 라우팅 구조는 특정 역할이 지정된 파일명에 의존합니다 [1].
page.js는 개별 라우트를 정의하고,layout.js는 공유 레이아웃을,error.js는 커스텀 에러 화면을,loading.js는 로딩 상태를 나타내는 데 사용됩니다 [1]. - 동적 라우트(Dynamic Routes): 대괄호를 사용하여 동적인 URL 경로를 처리합니다 [1]. 단일 매개변수를 받는 동적 라우트에는
[param]을 사용하고, 여러 경로 세그먼트를 모두 잡아내는 포괄적(catch-all) 라우트에는[...param]형식을 사용합니다 [1]. - 파일 및 컴포넌트 명명 표준: 파일 이름은 URL 친화적이고 대소문자를 구분하지 않는 운영체제에서의 충돌을 방지하기 위해
user-profile.tsx와 같이 kebab-case를 사용해야 합니다 [1-4]. 반면 해당 파일 내부에 정의된 React 컴포넌트는UserProfile과 같이 PascalCase를 적용하여 HTML 요소와 시각적으로 구분해야 합니다 [3, 4]. 컴포넌트 내부의 변수, props 및 커스텀 훅은 camelCase를 따릅니다 [1, 4, 5]. - 라우트 그룹(Route Groups): 폴더 이름을
(folderName)과 같이 괄호로 묶으면 라우트 그룹이 생성됩니다 [6]. 이 방식은 URL 경로 구조에 영향을 주지 않으면서 관련된 라우트를 논리적으로 그룹화할 수 있게 해줍니다(예:(marketing)/about/page.tsx는 여전히/about으로 해석됨) [6, 7]. 이를 통해 특정 섹션별로 별도의 레이아웃을 적용하기 쉬워지나, 여러 그룹에서 동일한 URL 경로가 중복되지 않도록 주의해야 합니다 [6, 7].
🔗 Knowledge Connections
- Related Topics: React Folder Structure, Naming Conventions in React, Clean Code Principles
- Projects/Contexts: Next.js, Frontend Scalability
- Contradictions/Notes: 제공된 모든 소스에서 Next.js 및 React 프로젝트의 파일명에는 kebab-case를, 컴포넌트명에는 PascalCase를 사용하는 것이 확장성을 위한 최상의 관행(Best Practice)임을 일관되게 주장하고 있으며, 모순되는 의견은 발견되지 않았습니다 [1-3].
Last updated: 2026-04-26