nextjs
CHAPTER 7 / 34
읽기 약 2분
SYNTAX
layout.tsx 해부: 공유 레이아웃
핵심 개념
layout.tsx는 하위 페이지에 공유되는 레이아웃입니다. children prop으로 페이지 콘텐츠를 주입합니다. RootLayout은 html과 body 태그를 포함합니다.
코드 분석
LAYOUT.TSX
// app/layout.tsx
export default function RootLayout({
children
}: {
children: React.ReactNode
}) {
return (
<html>
<body>
<nav>헤더</nav>
{children} ← 페이지
<footer>푸터</footer>
</body>
</html>
)
}AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
Claude
무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6
이 Next.js 'layout.tsx' 코드에서 서버/클라이언트 경계·use client 누락·캐시 무효화 버그를 찾아서 수정해줘.
ChatGPT
무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro
'layout.tsx'를 활용한 실전 페이지를 App Router + TypeScript + Server Actions로 만들어줘.
Gemini
무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro
이 Next.js 'layout.tsx' 사용 패턴이 빌드 크기와 LCP/INP/CLS에 미치는 영향을 분석하고 최적화 방안을 알려줘.
Grok
무료: Grok 4.1 / SuperGrok $30/mo
Next.js 'layout.tsx' vs Remix/Astro/SvelteKit의 동일 기능 구현을 2026년 기준으로 솔직하게 비교해줘.
⭐ 이것만 기억하세요
layout.tsx 해부: 공유 레이아웃은 이 3가지만 확실히 잡으세요
1.모든 페이지에 헤더·사이드바를 복붙하면 수정 시 전체 페이지를 찾아서 고쳐야 합니다
2.layout.tsx는 하위 라우트 전체에 공유되며, 페이지 전환 시 리렌더링되지 않아서 상태가 유지됩니다
3.다음 챕터에서 URL 파라미터로 동적 페이지를 생성하는 Dynamic Route를 배웁니다
공유하기
진행도 7 / 34