Client-side Transitions 데모

Next.js의 <Link>는 full page reload 없이 client-side transition을 수행합니다. 공유 layout의 상태가 유지되면서 page 콘텐츠만 교체됩니다.

파일 구조

client-side-transitions/
├── page.tsx          ← 현재 페이지
└── demo/
    ├── layout.tsx    ← 공유 layout (카운터 + 입력)
    ├── page.tsx      ← Home (children)
    ├── blog/
    │   └── page.tsx  ← Blog (children)
    └── settings/
        └── page.tsx  ← Settings (children)

데모 시작하기 →

체험 포인트: 데모에 진입하면 layout에 카운터와 입력란이 있습니다. 카운터를 올리고 텍스트를 입력한 뒤 다른 페이지로 이동해보세요. Layout 상태가 유지되는 것을 확인할 수 있습니다. 이것이 client-side transition의 핵심 동작입니다.

핵심 파일 코드

// demo/nextjs/16.1.6/linking-and-navigating/client-side-transitions/page.tsx
export default function Page() {
    // 핵심 동작: 실제 파일 구조와 런타임 결과를 함께 확인
}