nextjs
CHAPTER 32 / 34
읽기 약 2분
FUNCTION
Next.js 실전: 성능 최적화
핵심 개념
dynamic import, lazy loading, bundle 최적화로 성능을 개선합니다. Lighthouse 90+ 달성을 위한 핵심 기법입니다.
코드 분석
PERFORMANCE
// Dynamic import (코드 분할)
const Chart = dynamic(
() => import('./Chart'),
{ loading: () => <Skeleton/>, ssr: false }
)
// Font 최적화
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
// 이미지 최적화
<Image
src="/hero.jpg"
priority ← LCP
sizes="(max-width:768px) 100vw, 50vw"
/>AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
Claude
무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6
이 Next.js 'Next.js 실전: 성능 최적화' 코드에서 서버/클라이언트 경계·use client 누락·캐시 무효화 버그를 찾아서 수정해줘.
ChatGPT
무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro
'Next.js 실전: 성능 최적화'를 활용한 실전 페이지를 App Router + TypeScript + Server Actions로 만들어줘.
Gemini
무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro
이 Next.js 'Next.js 실전: 성능 최적화' 사용 패턴이 빌드 크기와 LCP/INP/CLS에 미치는 영향을 분석하고 최적화 방안을 알려줘.
Grok
무료: Grok 4.1 / SuperGrok $30/mo
Next.js 'Next.js 실전: 성능 최적화' vs Remix/Astro/SvelteKit의 동일 기능 구현을 2026년 기준으로 솔직하게 비교해줘.
⭐ 이것만 기억하세요
Next.js 실전: 성능 최적화는 이 3가지만 확실히 잡으세요
1.번들 크기가 크면 초기 로딩이 느리고, 불필요한 리렌더링이 많으면 인터랙션이 버벅거립니다
2.dynamic import로 코드 스플리팅, React.lazy로 지연 로딩, 이미지·폰트 최적화로 Core Web Vitals를 개선합니다
3.다음 챕터에서 완성된 앱을 Vercel에 배포합니다
공유하기
진행도 32 / 34