Next.js / App Router 네비게이팅 정리

 

 

 

App Router 네비게이팅의 핵심 개념

 

- 페이지 이동  = URL 변경 + 서버 컴포넌트 재렌더링

- 기본 이동은 서버 중심

- 필요한 경우에만 클라이언트 네비게이션 사용

 

<Link> 컴포넌트

 

특징

 

- 클라이언트 사이드 네비게이션

- 전체 새로고침이 되지 않는다.

- Prefetch 자동 지원

import Link from "next/link"
 
export default function Nav() {
    return (
        <nav>
            <Link href="/">Home</Link>
            <Link href="/posts">Posts</Link>
        </nav>
    );
}

"use client"
 
import {useRouter} from "next/navigation";
 
export default function LoginButton() {
    const router = useRouter();
 
    return (
        <button onClick={() => router.push("/dashboard")}>
            로그인
        </button>
    );
}

 

- push : 새 페이지 이동

- replace : 히스토리 대체

- back : 뒤로 가기

- refresh : 서버 컴포넌트 재요청

 

redirect() (서버 전용 네비게이션)

 

- 서버 컴포넌트 / 서버 액션 / 미들웨어에서 사용

 

- 즉시 이동 (렌더링 중단)

import {redirect} from "next/navigation"
 
export default async function Page() {
    const user = await getUser();
 
    if (!user) {
        redirect("/login");
    }
 
    return <div>Dashboard</div>;
}

import { notFound } from "next/navigation";
 
 
export default async function Page({ params }) {
const post = await getPost(params.id);
 
 
if (!post) {
notFound();
}
 
 
return <PostDetail post={post} />;
}

 

- /not-found.tsx 렌더링

- 서버에서만 사용 가능

 

URL 파라미터 & 쿼리스트링 네비게이션

//동적 라우트
//app/posts/[id]/page.tsx
 
export default function Page({ params }){
    return <div>Post ID: {params.id}</div>
}
 
//쿼리 스트링
 
"use client";
import { useSearchParams } from "next/navigation";
 
export default function Page() {
    const searchParams = useSearchParams();
    const q = searchParams.get("q");
 
    return <div>검색어: {q}</div>
}

 

페이지 이동시 실제로 일어나는 일

 

1. <Link> 클릭

2. 서버에 RSC 요청 (전체 RSC 요청)

3. 변경된 부분만 스트리밍

4. 클라이언트에서 부분 렌더링을 한다. (변경된 클라이언트 부분 JS Bundle 업데이트)