유리의 개발새발

미리 페이지 불러오는건가요? Next.js는 어떻게 미리 페이지를 불러올까?Next.js를 쓰면 페이지 이동이 굉장히 빠르다는 느낌을 받게 됩니다.이건 단지 라우팅 방식 때문만이 아니라, Next.js가 "미리" 다음 페이지를 로딩하고 있기 때문입니다.바로 이걸 Pre-fetching(프리페칭)이라고 합니다.✅ Pre-fetching이란?사용자가 아직 클릭하지도 않았는데, 앞으로 방문할 가능성이 높은 페이지를 미리 요청해서느낌상 거의 즉시 로드되는 것처럼 만드는 기술 아니 근데, 넥스트의 렌더링 과정은“Next.js는 서버에서 HTML을 내려주고, 그 다음 모든 JS 파일을 한 번에 번들링해서 브라우저에 보내는 구조 아닌가요?JS 번들을 다 받았으면, 다른 페이지로 이동할 때는 추가 요청 없이 렌더링만 ..

Next.js에서는 페이지를 이동할 때 단순히 를 쓰면 안 됩니다.겉보기엔 똑같아 보이지만, 내부적으로는 완전히 다른 동작을 합니다.이번 글에서는 와 의 차이를 시작으로, router.push, router.replace, router.back까지Next.js Page Router 기준의 모든 Navigation 방법을 정리합니다.🆚 vs — 왜 굳이 Link를 써야 하나?About위 코드는 페이지 전체가 완전히 새로고침됩니다.React 상태, Context, JS 메모리 등 모든 게 날아가고 HTML부터 다시 렌더됩니다.그냥 서버에서 새로 페이지를 받는 전통적인 방식.✅ Next.js 방식import Link from 'next/link';About는 Next.js에서 제공하는 컴포넌트로,클라이언..

Next.js에서 pages/ 폴더는 곧 URL 경로입니다.파일명이나 폴더명에 따라 자동으로 라우팅이 구성되고, 동적 페이지도 파일명만으로 쉽게 만들 수 있습니다.여기선 Page Router 기준으로 동작 방식을 정리합니다. (⚠️ App Router 아님)pages/ index.tsx → / about.tsx → /about contact.tsx → /contact blog/index.tsx → /blog blog/post.tsx → /blog/post폴더/파일 구조 = URL 구조React 컴포넌트를 해당 위치에 넣으면 자동으로 라우팅됩니다. 🔁 동적 라우팅 (Dynamic Routes)[] — 단일 동적 세그먼트pages/ post/ ..