개발자가 Next.js App Router로 블로그 앱을 구축해 동적 라우팅의 [slug] 패턴을 실무에서 적용하는 방법 체득

Context

Next.js의 라우팅, 레이아웃, 서버/클라이언트 컴포넌트 개념을 이론으로만 학습했을 때는 실제 프로젝트에서 어떻게 통합하는지 명확하지 않았다.

Technical Solution

• App Router의 파일 기반 라우팅을 활용해 app/ 디렉토리 구조로 페이지 자동 매핑: app/page.jsx(홈), app/about/page.jsx(소개), app/blog/page.jsx(블로그 목록) 구현
• Root layout.jsx에서 Header와 Footer 컴포넌트를 감싸 모든 하위 페이지에 공유 레이아웃 적용
• [slug] 동적 라우팅 폴더 구조로 개별 게시물 페이지 생성: 각 게시물마다 별도 파일 생성 없이 params.slug로 동적 렌더링
• posts.js 파일에서 모든 게시물 데이터를 중앙화해 page.jsx에서 slug 매개변수로 조회
• not-found.jsx를 [slug] 폴더 내에 배치해 존재하지 않는 slug에 대한 자동 폴백 처리

Key Takeaway

Next.js의 파일 기반 라우팅과 동적 세그먼트([slug])는 개별 리소스마다 페이지를 생성하지 않고도 매개변수 기반 렌더링을 자동화하므로, 블로그나 상품 상세 페이지 같은 반복적 구조에서 코드 중복을 최소화할 수 있다.