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