[Next.js] Navigation

Link component from 'next/link'

Link 컴포넌트는 a 태그를 가지고 만들어진 컴포넌트로 Next에서 제공되는 컴포넌트입니다. 원하는 목적지를 href prop으로 넘겨주면 클릭 시 해당 URL로 넘어갑니다.

import Link from 'next/link';

export default function Test() {
  const dynamic = 'test';

  return (
    <>
      <Link href='/'>Home</Link>
      <Link href={`/${dynamic}`}>Dynamic</Link>
    </>
  );
};

 

추가적으로 Link 컴포넌트는 replace라는 속성을 가지고 있습니다. 기본값은 false이며 해당 속성이 true가 되면 뒤로가기를 눌렀을 때 브라우저의 히스토리 스택에 새 URL을 추가하는 대신 현재 히스토리 상태를 대체한다고 합니다.

브라우저의 히스토리 스택에 새 URL을 추가하는 대신 현재 히스토리 상태를 대체한다?

어떤 의미인가 하면, 쉽게 설명해 이전 URL 기록이 사라지고 현재 URL이 히스토리에 등록된다고 봐도 됩니다.

예를 들어, '/' > '/test' > '/test/1'으로 이동했습니다.

기본적으로 브라우저의 히스토리에는 ['/', '/test', '/test/1']처럼 들어갑니다. 그래서 뒤로가기를 누르면 'test'에 접근하는 거죠.

만약 여기서 test/1으로 가는 Link 컴포넌트에 replace 속성이 true이면,
브라우저의 히스토리에 ['/', '/test']에서 '/test/1'로 넘어갈 때 대체됩니다. 최종 결과가 ['/', '/test/1']로 되는 거죠.
다르게 이해하면 바로 직전의 히스토리가 삭제된다고 생각해도 될 것 같습니다.

해당 기능을 어디서 사용하는가?
쉽게 예를 들면 로그인하고 나서 뒤로 가기를 눌렀을 때 다시 로그인 화면이 나오면 곤란하기 때문에 해당 부분에서 사용할 수 있습니다.
또는 쿼리 파라미터가 변경되는 경우 예를 들었을 때 필터의 조건이 있는데 뒤로가기를 했을 때 조건이 남아있지 않도록 할 때 사용할 수 있습니다.

 

Active Links

탭을 클릭했을 때 현재 사용 중인 탭과 그 외의 탭을 구분하기 위한 용도입니다.

'use client';

import {usePathname} from "next/navigation";

export default function Test() {
  const pathname = usePathname();
  const link = '/test';
  // isActive를 응용하여 활용하면 됩니다.
  const isActive = pathname === link || (pathname.startsWith(link) && link.href !== '/');
  
  return <h2 className={isActive ? 'font-bold' : 'text-blue-500'}> test </h2>;
}

 

참고

https://nextjs-ko.org/docs/app/building-your-application/routing/linking-and-navigating

https://nextjs-ko.org/docs/app/api-reference/components/link#replace

https://www.youtube.com/watch?v=b4ba60j_4o8&list=PLC3y8-rFHvwhIEc4I4YsRz5C7GOBnxSJY