Next.js 라우팅 & 레이아웃 완벽 가이드
🗂️ Nested Routing (중첩 라우팅)
폴더 기반 라우팅 시스템
Next.js는 폴더 구조를 통해 중첩된 경로를 자동으로 생성하는 혁신적인 라우팅 시스템을 제공합니다.
핵심 개념:
- 각 폴더 = URL 세그먼트에 매핑되는 라우트 세그먼트
- 폴더 구조 = URL 구조와 일치
- 더 많은 페이지를 직관적으로 구성 가능
🔑 핵심 파일들
page.tsx - 페이지 컴포넌트
- Next.js의 특수 파일
- React 컴포넌트를 export하는 파일
- 해당 경로에 접근하기 위해 필수적으로 필요
- 예:
/app/page.tsx→ 루트 경로/의 홈페이지
layout.tsx - 레이아웃 컴포넌트
- 여러 페이지에서 공유되는 UI 정의
- 해당 경로와 하위 경로의 공통 레이아웃 담당
📊 Dashboard 페이지 구현
1단계: 기본 페이지 생성
// /app/dashboard/page.tsx
export default function Page() {
return <p>Dashboard Page</p>;
}결과 확인:
http://localhost:3000/dashboard 접속
🎨 Dashboard 레이아웃 구현
공유 UI의 필요성
대시보드의 여러 페이지에서 공통으로 사용되는 내비게이션이 필요합니다. Next.js에서는 layout.tsx 파일을 통해 이를 효율적으로 구현할 수 있습니다.
2단계: 대시보드 레이아웃 생성
// /app/dashboard/layout.tsx
import SideNav from "@/app/ui/dashboard/sidenav";
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
<div className="w-full flex-none md:w-64">
<SideNav />
</div>
<div className="flex-grow p-6 md:overflow-y-auto md:p-12">
{children}
</div>
</div>
);
}🔧 레이아웃 구조 분석
<SideNav /> 컴포넌트
- 레이아웃에 포함된 모든 컴포넌트는 레이아웃의 일부가 됨
- 사이드 내비게이션 역할 담당
children Props
- 하위 페이지 또는 또 다른 레이아웃이 될 수 있음
/dashboard내의 모든 페이지가 자동으로 이 레이아웃 안에 중첩됨
🚨 폰트 오류 해결
오류 메시지
Module not found: Can't resolve '@/app/ui/fonts'해결 방법
1단계: /app/ui/fonts.ts에 Lusitana 폰트 추가
// /app/ui/fonts.ts
// ...기존 코드
export const lusitana = Lusitana({
weight: ["400", "700"],
subsets: ["latin"],
});2단계: /app/ui/acme-logo.tsx에서 폰트 import
// /app/ui/acme-logo.tsx
import { lusitana } from "@/app/ui/fonts";🏠 루트 레이아웃 (Root Layout)
전역 레이아웃의 중요성
이전 Chapter 3에서 /app/layout.tsx에 Inter 폰트를 적용했습니다. 이로 인해 모든 하위 페이지에서 자동으로 Inter 폰트를 사용할 수 있게 되었습니다.
루트 레이아웃의 정의
루트 레이아웃은 Next.js 프로젝트의 최상단(/app)에 위치하여 모든 하위 페이지에 공통 UI를 적용하는 필수 레이아웃입니다.
// /app/layout.tsx
import "@/app/ui/global.css";
import { inter } from "@/app/ui/fonts";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={`${inter.className} antialiased`}>
{children}
</body>
</html>
);
}🎯 루트 레이아웃의 특징
전역 설정 담당
<html>및<body>태그 수정- 메타데이터 추가 (Chapter 16에서 자세히 학습)
- 전역 스타일 및 폰트 적용
레이아웃 계층 구조
- 루트 레이아웃 (
/app/layout.tsx): 전체 애플리케이션에 적용 - 대시보드 레이아웃 (
/app/dashboard/layout.tsx):/dashboard하위 경로에만 적용
📋 레이아웃 시스템 정리
레이아웃 적용 범위
| 레이아웃 파일 | 적용 범위 | 역할 |
|---|---|---|
/app/layout.tsx | 전체 애플리케이션 | 전역 설정, 공통 스타일 |
/app/dashboard/layout.tsx | /dashboard/* | 대시보드 공통 UI |
🔄 중첩 구조의 장점
- 재사용성: 공통 UI 컴포넌트의 효율적 관리
- 유지보수성: 레이아웃 변경 시 한 곳에서만 수정
- 확장성: 새로운 페이지 추가 시 자동으로 레이아웃 적용
- 성능: 레이아웃 컴포넌트의 불필요한 리렌더링 방지
루트 레이아웃은 전역 설정을 담당하므로, 대시보드 전용 UI는 별도의 레이아웃에서 관리하는 것이 적절합니다.
프론트엔드 입문 개발자입니다.