nextjs
CHAPTER 20 / 34
읽기 약 2분
FUNCTION
Next.js 실전: 블로그 목록 페이지
핵심 개념
Server Component로 블로그 목록을 렌더링합니다. fetch로 데이터를 가져오고 map으로 카드를 렌더링합니다. 데이터 페칭을 지우며 목록이 어떻게 사라지는지 확인하십시오.
코드 분석
BLOG LIST — SERVER COMPONENT
// app/blog/page.tsx (Server Component)
async function getPosts() {
const res = await fetch(
'https://jsonplaceholder.typicode.com/posts?_limit=3',
{ next: { revalidate: 3600 } }
)
return res.json()
}
export default async function BlogPage() {
const posts = await getPosts()
return posts.map(p => <div>{p.title}</div>)
}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.Server Component에서 데이터를 가져오고, Dynamic Route로 상세 페이지를 연결하며, generateStaticParams로 빌드 시 정적 생성합니다
3.다음 챕터에서 URL 쿼리 파라미터로 검색 기능을 구현합니다
공유하기
진행도 20 / 34