Next.js App Router 기본 구조

App Router는 `app` 디렉터리의 폴더 구조를 URL 구조로 사용합니다. `page.tsx`는 라우트의 실제 화면이고, `layout.tsx`는 하위 라우트가 공유하는 UI입니다.

핵심 포인트

• `app/docs/page.tsx`는 `/docs` 목록 페이지입니다.
• `app/docs/[slug]/page.tsx`는 문서 상세처럼 동적인 URL을 처리합니다.
• 서버 컴포넌트를 기본으로 사용하고, 브라우저 상태가 필요한 부분만 `use client`로 분리합니다.

HS Lab 적용

HS Lab은 학습 문서와 실습 상세를 파일 기반 라우트로 빠르게 확장합니다. 나중에 admin 기능이 들어오면 DB 기반 콘텐츠 관리로 전환할 수 있습니다.