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)을 사용할 필요 없이 동작한다.