1. 개요

기존 페이지 라우터 방식과 비슷하지만 서버 컴포넌트라는 개념이 추가되어 방식이 변경된다.

앱 라우터 js 번들에는 클라이언 컴포넌트만 포함되어 서버 컴포넌트는 포함이 되지않아 서버 컴포넌트로 구성된 RSC Payload도 함께 전달해주어야한다.

2. 사용법

기본

import Link from "next/link";

 <Link href={'/'}>index</Link>

link를 import 해주고 link 태그를 사용하여 연결해준다.

프로그래매틱한 이동법

함수 등을 사용하여 페이지를 이동시키는 법

import { useRouter } from "next/navigation";

export default function Searchbar() {
	const router = useRouter();
    
    const onSubmit = () =>{
        router.push(`/search?q=${search}`);
    }
    
    return (
        <div>
            <input value={search} onChange={onChangeSearch}/>
            <button onClick={onSubmit}>검색</button>
        </div>
    )
}

1. 앱 라우터에서는 페이지 라우터와 달리 next/navigation에서 useRouter를 불러와야한다.
2. 함수 내 router를 사용하여 이동할 페이지를 연결해준다.
3. 연결하고 싶은 버튼에 함수를 달아준다.

앱라우터의 프리패칭(pre-fetching)

링크들이 존재해 이동할 가능성이 있는 모든 페이지의 데이터를 미리 불러오는 동작

• 개발모드에서 확인할 수 없고 npm run build -> npm run start로 프로덕션 모드로 확인가능

앱 라우터의 모든 페이지는 static 하거나 dynamic 페이지로 나뉜다.
staic 페이지 : 빌드 타임이 미리 생성된 정적인 페이지 -rsc와 js 번들 둘다 불러옴
dynamic 페이지 : 브라우저가 요청할 때 마다 생성되는 동적인 페이지 - rsc만 프리 패칭 후 js 번들은 페이지 이동이 발생했을 때만 불러온다.