nextjs
CHAPTER 5 / 34
읽기 약 2분
SYNTAX
Next.js App Router 해부: 폴더 구조
핵심 개념
App Router는 app/ 폴더 기반으로 동작합니다. page.tsx가 페이지, layout.tsx가 레이아웃, loading.tsx가 로딩 UI입니다. 각 파일을 지우며 라우팅이 어떻게 무너지는지 확인하십시오.
코드 분석
APP ROUTER STRUCTURE
app/
├── layout.tsx ← 루트 레이아웃
├── page.tsx ← 홈페이지 /
├── loading.tsx ← 로딩 UI
├── error.tsx ← 에러 UI
├── not-found.tsx ← 404
└── about/
└── page.tsx ← /about
// app/page.tsx
export default function Home() {
return <h1>CYBERDYNE HOME</h1>
}AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
Claude
무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6
이 Next.js 'Next.js App Router 해부: 폴더 구조' 코드에서 서버/클라이언트 경계·use client 누락·캐시 무효화 버그를 찾아서 수정해줘.
ChatGPT
무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro
'Next.js App Router 해부: 폴더 구조'를 활용한 실전 페이지를 App Router + TypeScript + Server Actions로 만들어줘.
Gemini
무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro
이 Next.js 'Next.js App Router 해부: 폴더 구조' 사용 패턴이 빌드 크기와 LCP/INP/CLS에 미치는 영향을 분석하고 최적화 방안을 알려줘.
Grok
무료: Grok 4.1 / SuperGrok $30/mo
Next.js 'Next.js App Router 해부: 폴더 구조' vs Remix/Astro/SvelteKit의 동일 기능 구현을 2026년 기준으로 솔직하게 비교해줘.
⭐ 이것만 기억하세요
Next.js App Router 해부: 폴더 구조는 이 3가지만 확실히 잡으세요
1.React만으로 라우팅을 구현하면 react-router 설정, 코드 스플리팅, SSR을 모두 수동으로 해야 합니다
2.Next.js App Router는 app/ 폴더 구조가 곧 URL 경로이며, page.tsx가 있는 폴더가 하나의 라우트가 됩니다
3.다음 챕터에서 서버에서 렌더링되는 Server Component의 개념과 장점을 배웁니다
공유하기
진행도 5 / 34