1. 동적 라우트의 개념
- 정적 라우트:
/about-us처럼 항상 동일한 경로를 가진다.
- 동적 라우트: URL의 일부가 변하는 라우트로, 사용자 입력이나 데이터에 따라 변경된다. 예를 들어,
/movies/123처럼 영화 ID에 따라 URL이 달라진다.
2. Next.js에서 동적 라우트 구현 방법
- 폴더 이름에 대괄호 사용: 동적 라우트를 생성하기 위해 폴더 이름에 대괄호
[]를 사용한다.
- 예시:
movies/[id]/page.tsx 폴더를 생성하면 /movies/ 뒤에 어떤 값이 오든 해당 페이지 컴포넌트가 렌더링된다.
- 파일 시스템 기반 라우팅: Next.js는 파일 시스템을 기반으로 라우트를 설정하므로, 특별한 설정 없이도 동적 라우트를 구현할 수 있다.
3. 동적 라우트에서 데이터 접근
- props 객체 활용: 페이지 컴포넌트에서는
props를 통해 URL에서 전달된 값을 접근할 수 있다.
params: 동적 라우트에서 정의한 변수들을 담고 있다.
- 예시:
params.id를 통해 URL에서 전달된 id 값을 얻을 수 있다.
searchParams: URL의 쿼리 파라미터를 담고 있다.
- 예시:
?region=kr와 같은 쿼리 파라미터를 사용할 수 있다.
- 데이터 활용: 얻은
id 값을 이용해 필요한 데이터를 API 등에서 가져올 수 있다.
- 예시: 해당
id에 해당하는 영화의 상세 정보를 받아와 페이지에 표시한다.
4. 서버 사이드 렌더링과 콘솔 출력
- 서버 사이드 실행: 이 컴포넌트는 서버 사이드에서 렌더링되므로,
console.log는 서버 측에서 실행된다.
- 브라우저 콘솔과의 차이: 서버 사이드에서의
console.log는 브라우저의 콘솔에 출력되지 않는다.
5. 동적 라우트의 장점
- 유연한 페이지 생성: 사용자 입력이나 데이터에 따라 동적으로 페이지를 생성할 수 있다.
- 간단한 구현 방식: 폴더 구조와 파일 시스템을 활용하여 쉽게 동적 라우트를 구현할 수 있다.
- 추가 설정 불필요: 별도의 라우팅 설정이나 훅(hook)을 사용할 필요 없이 동작한다.