# Section3
6. 네비게이팅
1. Link 페이지 이동
글로벌 레이아웃으로 네비게이션을 적용하기 위해
Link 태그를 src/app/layout.tsx 에 적용
+) App Router에서 페이지 요청시
서버 컴포넌트는 rsc payload, 클라이언트 컴포넌트는 js bundle로 전달된다
// 📄 src/app/layout.tsx
import Link from 'next/link';
export default function RootLayout({ children } : Readonly<{ children: React.ReactNode }>) {
return (
<html lang='en'>
<body>
<header>
<Link href={'/'}>index</Link>
<Link href={'/search'}>search</Link>
<Link href={'/book/1'}>book</Link>
</header>
{children}
</body>
</html>
);
}상황1. 현재 search 페이지는 서버 컴포넌트
rsc payload가 불러와지는 네트워크 요청 확인
상황2. search 페이지를 클라이언트 컴포넌트로 변경
rsc payload와 js bundle이 불러와지는 네트워크 요청 확인
2. 프로그래매틱한 이동
이벤트 핸들러를 통해 페이지가 이동하는 방식으로
App Router에서는 useRouter를 next/navigation으로부터 import 해야한다
// 📄 src/components/searchbar.tsx
'use client';
import { useRouter } from 'next/navigation';
export default function Searchbar() {
const router = useRouter();
const onSubmit = () => {
router.push(`이동할 경로`);
};
return (
<div>
<button onClick={onSubmit}>이동 버튼</button>
</div>
);
}
프론트엔드