Antigravity Agent
18 lines
2.9 KiB
Markdown
18 lines
2.9 KiB
Markdown
# [[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* |