Next.js로 웹사이트 라우팅 완벽 가이드

라우팅(Routing)

라우팅은 사용자가 요청한 URL에 따라서 어떤 페이지를 보여줄지 결정하는 과정을 말해요.
Next.js에서는 앱 라우팅과 페이지 라우팅을 통해 URL 경로와 페이지 파일을 직접 연결합니다.

사용자가 /about 경로를 입력하면, Next.js는 해당 경로와 맞는 페이지를 표시합니다. 일종의 웹 네비게이션이라고 생각하면 됩니다.

 

라우터(Router)

라우터는 이러한 라우팅을 관리하고 처리하는 기능을 제공하는 도구입니다. Next.js에서 페이지 라우터는 next/router, 앱 라우터는 next/navigation이 라우터 관리 도구입니다. 저희는 해당 도구에서 제공하는 여러가지 훅과 컴포넌트를 사용하여 페이지를 탐색합니다. 간단히 말해서 라우터는 사용자의 URL을 해석하고 해당 URL에 맞는 컴포넌트를 렌더링합니다.

 

라우터(Route)

라우트는 URL과 특정 컴포넌트 간의 매핑을 나타냅니다. 라우트는 일반적으로 페이지의 경로와 해당 경로에 표시할 컴포넌트를 정의하는 데 사용됩니다. 예를 들어 /contact 경로에 대한 라우트를 정의하면 사용자가 이 경로로 이동할 때 해당 컴포넌트가 렌더링됩니다.

---

Next.js에서 라우팅 구현하기

페이지 라우팅

Next.js에서는 파일 시스템 기반의 라우팅을 사용합니다. pages 디렉터리 내의 파일이 자동으로 라우트가 됩니다. 예를 들어, pages/about.tsx 파일은 /about 경로와 연결됩니다.

// pages/about.tsx
export default function About() {
  return <h1>About Component</h1>;
}

 

동적 라우팅

Next.js에서는 동적 라우팅을 간편하게 설정할 수 있습니다. 대괄호([ ])를 사용하여 동적 경로를 정의합니다.

// pages/posts/[id].tsx
import { useRouter } from "next/router";

export default function Post() {
  const router = useRouter();
  const { id } = router.query;
  
  return <h1>Post: {id}</h1>;
}

1. Router 훅 가져오기

import { useRouter } from "next/router";

useRouter 훅을 사용하여 Next.js 라우터에 접근합니다.

 

2. 라우터 사용

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

useRouter 훅을 호출하여 라우터 객체를 가져옵니다.
router.query를 통해 URL의 쿼리 파라미터에 접근할 수 있습니다. 여기서는 URL의 [id] 부분이 id 변수에 할당됩니다.

 

3. 컴포넌트 반환

return <h1>Post: {id}</h1>;

id를 출력하는 간단한 컴포넌트를 반환합니다. 이 컴포넌트는 URL의 id 값을 화면에 표시합니다.

 

예시

만약 사용자가 /posts/123 URL로 접근하면, router.query.id는 "123"이 됩니다. 따라서 화면에는 "Post: 123"이 출력됩니다.