1. <Link> 컴포넌트 사용: Next.js는 react-router의 <Link> 컴포넌트와 유사한 기능을 제공합니다. 이를 통해 클라이언트 사이드 라우팅을 수행할 수 있습니다. 아래는 pages 폴더 내에 있는 다른 페이지로 이동하는 예시 코드입니다.

   import Link from 'next/link';
   
   function MyComponent() {
     return (
       <Link href="/other-page">
         <a>다른 페이지로 이동하기</a>
       </Link>
     );
   }
   

   이렇게 <Link> 컴포넌트를 사용하면 클릭한 링크로 자연스럽게 페이지를 이동할 수 있습니다.

2. JavaScript에서 프로그래밍 방식으로 이동: Next.js는 JavaScript에서 프로그래밍 방식으로 페이지 이동을 할 수도 있습니다. next/router 모듈을 사용하여 현재 페이지의 경로를 변경하고 다른 페이지로 이동할 수 있습니다. 아래는 예시 코드입니다.

   import { useRouter } from 'next/router';
   
   function MyComponent() {
     const router = useRouter();
   
     const handleClick = () => {
       router.push('/other-page');
     };
   
     return (
       <button onClick={handleClick}>다른 페이지로 이동하기</button>
     );
   }
   

   위의 코드에서 router.push('/other-page')는 /other-page로 페이지를 이동시킵니다.

이외에도 Next.js에서는 <a> 태그를 직접 사용하여 페이지로 이동하는 방법도 있습니다. 또한, 동적 라우팅 및 매개변수를 사용하여 동적인 링크 처리도 가능합니다. Next.js의 공식 문서를 참조하여 더 자세한 정보를 얻을 수 있습니다.

• Next.js 공식 문서: https://nextjs.org/docs
• Link 컴포넌트 문서: https://nextjs.org/docs/api-reference/next/link
• next/router 문서: https://nextjs.org/docs/api-reference/next/router