[Next.js] 동적 라우트 (Dynamic Routes)

Dynamic Routes

• 동적 라우트를 말함
  • /about-us 이런것들은 정적 라우팅이다.
  • /movies/12321 ← 이런것들이 동적 라우팅이다 (영화번호 처럼 사용자가 입력한 숫자가 들어가는 형태)
• Next.js에서 동적 라우트 만드는 방법

  • movies/[id]/page.tsx 처럼 작성하면 됨

  • 반드시 폴더를 [중괄호]로 작성해줘야함

  • movies/ 뒤에 어떤 숫자값이 들어와도 잘 동작함.

  • id가 필요하다면 어떻게 해야할까?
    - props를 이용하면 됨

    export default function MovieDetail(props) {
    	console.log(props)
    	==> 서버 딴에서 실행됨 아래와 같은 결과
    	{ params : {id: '321321312'}, searchParams: {} } 
    	
    	==> 만약 movies/32131?region=kr 식으로 입력했다면
    	==> searchParams : {region : 'kr'} 식으로 들어간다.
    }
    
    export default function MovieDetail({params : {id}} : {params: {id:string}}) {
    // 위처럼 쓸수도 있음
    

Client Component의 득과 실

• client component를 사용하면 meta data를 사용할 수 없다는 단점이 있다.
  • useState, useEffect 같은 것을 사용한다면 사용이 불가능하다는 소리임.
  • 이를 위한 해결점으로 Server side component가 존재.