nextjs
CHAPTER 11 / 34
읽기 약 2분
SYNTAX
Link 컴포넌트 해부: 클라이언트 사이드 네비게이션
핵심 개념
next/link의 Link 컴포넌트는 페이지 새로고침 없이 라우팅합니다. prefetch로 미리 로딩합니다. useRouter로 프로그래밍 방식 라우팅도 가능합니다.
코드 분석
NEXT/LINK
import Link from 'next/link'
import { useRouter } from 'next/navigation'
// ✅ Link 컴포넌트
<Link href="/units">
유닛 목록
</Link>
// ✅ useRouter (프로그래밍)
const router = useRouter()
router.push('/units')
router.back()
router.refresh()AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
Claude
무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6
이 Next.js 'Link 컴포넌트' 코드에서 서버/클라이언트 경계·use client 누락·캐시 무효화 버그를 찾아서 수정해줘.
ChatGPT
무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro
'Link 컴포넌트'를 활용한 실전 페이지를 App Router + TypeScript + Server Actions로 만들어줘.
Gemini
무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro
이 Next.js 'Link 컴포넌트' 사용 패턴이 빌드 크기와 LCP/INP/CLS에 미치는 영향을 분석하고 최적화 방안을 알려줘.
Grok
무료: Grok 4.1 / SuperGrok $30/mo
Next.js 'Link 컴포넌트' vs Remix/Astro/SvelteKit의 동일 기능 구현을 2026년 기준으로 솔직하게 비교해줘.
⭐ 이것만 기억하세요
Link 컴포넌트 해부: 클라이언트 사이드 네비게이션은 이 3가지만 확실히 잡으세요
1.a 태그로 이동하면 매번 전체 페이지가 새로고침돼서 SPA의 빠른 전환 경험을 줄 수 없습니다
2.next/link는 뷰포트에 보이는 링크를 자동 프리패치하고, 클라이언트 사이드 네비게이션으로 필요한 부분만 교체합니다
3.다음 챕터에서 서버 사이드 API 엔드포인트를 만드는 Route Handler를 배웁니다
공유하기
진행도 11 / 34