728x90
반응형
들어가며
Next.js 13부터 도입된 App Router는 새로운 Layout 시스템을 제공했다. 이는 페이지 간 공통 UI를 효율적으로 관리하고, 더 나은 사용자 경험을 제공하는데 도움을 준다.
Layout의 기본 개념
Layout은 여러 페이지에서 공유되는 UI 요소를 정의하는 특별한 컴포넌트다.
따라서 페이지 이동시, 레이아웃은 리렌더링 되지 않고, 오직 페이지 컴포넌트만 업데이트 된다. 이를 부분 렌더링(partial rendering)이라고 한다.
기본 Layout 구조
// app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
<header>
<nav>메인 네비게이션</nav>
</header>
<main>{children}</main>
<footer>푸터 영역</footer>
</body>
</html>
)
}
Layout의 종류
1. Root Layout
app/layout.tsx
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>
{children}
</body>
</html>
)
}
2. 중첩 Layout
// app/blog/layout.tsx
export default function BlogLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<div className="blog-container">
<aside className="sidebar">
<nav>블로그 메뉴</nav>
</aside>
<div className="content">
{children}
</div>
</div>
)
}
3. 그룹 Layout
// app/(marketing)/layout.tsx
export default function MarketingLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<div className="marketing-layout">
<nav className="marketing-nav">
<a href="/products">Products</a>
<a href="/pricing">Pricing</a>
<a href="/about">About</a>
</nav>
{children}
</div>
)
}
사실, 파일 및 layout 구조는 Svelte4와 유사하다.(Svelte5 - runes - 는 아직 살펴보지 않았다)
728x90
반응형
'개발 공부 > Next.js' 카테고리의 다른 글
| 쿼리 파라미터(searchParams/useSearchParams) & 경로정보(params/usePathname ) (0) | 2025.01.03 |
|---|---|
| Link 컴포넌트를 이용한 네비게이션 최적화 (2) | 2025.01.02 |
| Next.js의 이미지 최적화 (0) | 2024.12.31 |
| Next.js의 폰트 최적화: CLS 개선과 사용자 경험 향상하기 (0) | 2024.12.30 |
| Next.js 15 패키지 매니저 선택하기: npm vs yarn vs pnpm (0) | 2024.12.27 |