Route Groups
routes들을 논리적으로 그룹화할 수 있게 해주는 기능
URL 경로에는 영향을 주지 않는다. -> 파일 구조를 더 명확하게 정리할 수 있다.
- 사용방법 : 폴더 이름을 괄호 ( ) 로 감싼다.
| 파일구조 | 생성 URL |
| app / about / page.tsx | /about |
| app / (about) / page.tsx | / |
| app / (home) / about.tsx | /about |
Dynamic route (동적 라우팅)
폴더 이름에 대괄호 [ ] 를 사용하면 동적 라우팅(Dynamic Routing) 을 만들 수 있다.
app/
└── product/
└── [id]/
└── page.tsx
위 구조는 /product/123, /product/abc, /product/42 등 다양한 URL을 처리할 수 있다.
id는 변수처럼 작동하며, 이 값은 params 객체로 전달된다.
metadata
페이지의 <head> 영역에 들어가는 정보를 의미
각 페이지(page)나 레이아웃(layout) 파일에서 export const metadata 형태로 메타데이터를 정의할 수 있다.
- page.tsx나 layout.tsx에서만 metadata를 export 할 수 있다.
- 중첩되는 레이아웃 구조에서는 메타데이터가 병합된다.
- Client Component에서는 metadata를 export 할 수 없다. 오직 Server Component에서만 가능
"use client"가 선언된 파일은 Client Component이므로 metadata를 내보낼수없다.
'개발공부 > Next.js' 카테고리의 다른 글
| [Next.js] Data Fetching (0) | 2025.04.14 |
|---|---|
| [Next.js] Loading UI (0) | 2025.04.14 |
| [Next.js] layout.tsx (0) | 2025.04.13 |
| [Next.js] 하이드레이션(Hydration) (0) | 2025.04.12 |
| [Next.js] App Router (0) | 2025.04.08 |
