Next.js는 React 기반의 프레임워크로, 간단한 프로젝트부터 복잡한 웹 애플리케이션까지 구축하기에 적합합니다. 기본적으로 Next.js는 파일 시스템 기반의 라우팅을 제공하지만, 때로는 더 세밀한 컨트롤이 필요한 경우가 있을 수 있습니다. 이때 커스텀 라우팅을 구현할 필요가 있습니다.

동적 라우팅

Next.js에서 동적 라우팅을 구현하는 가장 일반적인 방법은 파일 시스템 기반의 동적 라우팅입니다. 예를 들어, pages 폴더 내에 users 폴더를 생성하고 id.js 파일을 만들면 /users/:id 경로에 대한 동적 라우팅이 가능해집니다.

// pages/users/[id].js

import { useRouter } from 'next/router';

function User() {
  const router = useRouter();
  const { id } = router.query;

  return <div>User ID: {id}</div>;
}

export default User;

위의 예제에서 id는 동적으로 변경될 수 있는 값입니다. 이런 방식으로 동적 라우팅을 구현하면 /users/1, /users/2 등 다양한 경로로 접근할 수 있습니다.

커스텀 라우팅

만약 더 세밀한 컨트롤이 필요하다면 Next.js에서 커스텀 라우팅을 구현할 수도 있습니다. 이를 위해 Next.js에서는 next/link와 next/router 모듈을 제공합니다.

// pages/about.js

import Link from 'next/link';
import { useRouter } from 'next/router';

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

  const handleClick = (e) => {
    e.preventDefault();
    router.push('/contact'); // 페이지 이동
  };

  return (
    <div>
      <h1>About Page</h1>
      <Link href="/">
        <a>Go to Home</a>
      </Link>
      <button onClick={handleClick}>Go to Contact</button>
    </div>
  );
}

export default About;

위의 예제에서 Link 컴포넌트는 내부의 a 태그를 클릭하면 지정된 경로로 이동하는 역할을 합니다. router.push 메서드는 버튼을 클릭했을 때 지정된 경로로 이동합니다.

결론

Next.js에서는 파일 시스템 기반의 라우팅을 제공하면서도 필요에 따라 커스텀 라우팅을 구현할 수 있습니다. 동적 라우팅과 커스텀 라우팅을 통해 다양한 웹 애플리케이션을 개발할 수 있으며, next/link와 next/router 모듈을 통해 더욱 세밀한 컨트롤을 할 수 있습니다.

References:

• Next.js Documentation: Custom Routing
• Next.js Documentation: Link
• Next.js Documentation: Router