전통적으로 html에는 하이퍼링크인
a 태그가 있다.Next.js에서는 페이지간 이동에
Link 컴포넌트를 이용할 것을 권장하고 있다.어떤 것들을 하길래?
Link에 있는 페이지들을 백그라운드에서 미리 요청해서 갖고 있는다.
navigate 요청이 오면 미리 받아둔 페이지를 바로 보여준다.
Next.js에서 라우팅 및 내비게이션 방법
Next.js에서는 라우트 간 내비게이션을 위한 네 가지 방법이 있습니다:
- <Link> 컴포넌트:
- HTML의 <a> 태그를 확장하여 클라이언트 측 내비게이션과 프리패칭을 제공합니다.
- 사용 예:
import Link from 'next/link';
export default function Page() {
return <Link href="/dashboard">Dashboard</Link>;
}
2.
useRouter() 훅
:
- 클라이언트 컴포넌트에서 프로그래밍적으로 라우트를 변경할 수 있습니다.
- 사용 예:
'use client';
import { useRouter } from 'next/navigation';
export default function Page() {
const router = useRouter();
return (
<button type="button" onClick={() => router.push('/dashboard')}>
Dashboard
</button>
);
}
3.
redirect 함수
:
- 서버 컴포넌트에서 사용하여 리다이렉트를 수행합니다.
- 사용 예:
import { redirect } from 'next/navigation';
export default async function Profile({ params }) {
const id = (await params).id;
if (!id) {
redirect('/login');
}
// ...
}
- 네이티브 History API:
- window.history.pushState와 window.history.replaceState를 사용하여 브라우저의 히스토리 스택을 업데이트합니다.
- 사용 예:
'use client';
export default function SortProducts() {
function updateSorting(sortOrder) {
window.history.pushState(null, '', `?sort=${sortOrder}`);
}
return (
<>
<button onClick={() => updateSorting('asc')}>Sort Ascending</button>
<button onClick={() => updateSorting('desc')}>Sort Descending</button>
</>
);
}
라우팅 및 내비게이션 작동 방식
- 코드 분할:
- 서버 컴포넌트는 라우트 세그먼트에 따라 자동으로 코드가 분할되어 필요한 코드만 로드됩니다.
- 프리패칭:
- <Link> 컴포넌트를 사용하면 사용자가 보게 될 라우트를 미리 로드합니다. 페이지가 처음 로드되거나 스크롤을 통해 보일 때 자동으로 프리패칭됩니다.
- 캐싱:
- Next.js는 클라이언트 측에서 라우터 캐시를 사용하여 방문한 라우트의 데이터를 저장합니다. 이를 통해 성능을 개선합니다.
- 부분 렌더링:
- 내비게이션 시 변경된 라우트 세그먼트만 렌더링되고, 공유된 세그먼트는 유지됩니다. 이를 통해 데이터 전송량과 실행 시간을 줄입니다.
- 소프트 내비게이션:
- Next.js는 페이지 간 소프트 내비게이션을 지원하여 클라이언트 상태를 유지합니다.
- 뒤로 및 앞으로 내비게이션:
- 기본적으로 Next.js는 뒤로 및 앞으로 내비게이션 시 스크롤 위치를 유지합니다.