3.4.1 <Link> 컴포넌트

<Link> 컴포넌트는 HTML의 <a> 태그를 확장하여 route 간의 prefetching과 클라이언트 사이드 내비게이션을 제공하는 내장 컴포넌트입니다. Next.js에서 route 간 이동을 위해서는 주로 이 <Link> 컴포넌트를 사용한다는 점을 꼭 기억하기 바랍니다.

<Link> 컴포넌트는 아래 예시 코드와 같이 next/link 패키지로부터 import해서 사용하면 됩니다. 그리고 <Link> 컴포넌트의 href 속성에 이동할 경로를 입력하면 됩니다.

import Link from 'next/link';

export default function Page() {
    return <Link href='/home'>Home</Link>;
}

3.4.2 useRouter() 훅

useRouter() 훅은 클라이언트 컴포넌트에서 Router를 사용해서 route를 변경할 수 있게 해주는 훅입니다. 아래 예시 코드와 같이 next/navigation 패키지로부터 import해서 사용하면 됩니다.

'use client';

import { useRouter } from 'next/navigation';

function Page() {
    const router = useRouter();

    return (
        <button
            type='button'
            onClick={() => router.push('/home')}>
            Home
        </button>
    );
}

export default Page;

하지만 위와 같이 Router를 사용해서 이벤트 핸들러를 통해 route를 변경할 경우, 웹사이트에서 버튼이나 링크 위에 커서를 올려도 어떤 페이지로 링크가 걸려있는지 확인할 수 없으며 단축키(예: macOS에서 CMD + 클릭)를 사용해서 링크를 새 탭에서 띄우는 것도 불가능합니다. 그래서 특별한 경우가 아니면 <Link> 컴포넌트를 사용해서 route를 변경하는 것이 좋습니다.

3.4.3 redirect() 함수

서버 컴포넌트에서 특정 조건에 따라 다른 경로로 Redirection을 시키고 싶을 경우에는, 아래 코드와 같이 redirect() 함수를 사용하면 됩니다.

import { redirect, RedirectType } from 'next/navigation';
import { getSession } from '@/lib/authManager';

export default async function Page() {
    const session = await getSession();

    if (!session) {
        redirect('/', RedirectType.replace);
    }

    // ...
}

그리고 redirect() 함수를 사용할 때는 알아두어야 할 점들이 몇가지 있습니다. 먼저 redirect() 함수는 307(Temporary Redirect) HTTP 상태 코드를 기본으로 반환하며, Server Actions에서 POST 요청의 결과로 성공 페이지로 리디렉션할 경우 일반적으로 303(See Other) HTTP 상태 코드를 반환합니다.

그리고 redirect() 함수는 내부적으로 오류를 throw하기 때문에, 반드시 try/catch 블록 외부에서 호출해야 합니다. 만약 아래 코드와 같이 redirect() 함수를 try/catch 블록으로 감싸면 Redirection이 제대로 작동하지 않게 됩니다.

import { redirect, RedirectType } from 'next/navigation';
import { getSession } from '@/lib/authManager';

export default async function Page() {
    const session = await getSession();

    if (!session) {
        // ❌ try/catch 블록으로 감싸면 안됨!
        try {
            redirect('/', RedirectType.replace);
        } catch (error) {
            // ...
        }    
    }

    // ...
}

또한, 클라이언트 컴포넌트에서 렌더링 중에는 redirect() 함수를 호출할 수 있지만, 이벤트 핸들러 내부에서는 호출할 수 없습니다. 그래서 이러한 경우에는 useRouter() 훅을 사용하는 것이 적합합니다. 그리고 redirect() 함수는 절대 URL을 지원하므로 외부 링크로의 Redirection도 가능합니다.

마지막으로 렌더링 프로세스 이전에 Redirection을 수행해야 한다면, next.config.js나 Middleware를 활용하는 것이 좋습니다.