Next.js 튜토리얼 Dynamic Routes 간단 정리

Dynamic Routes

• 정적 데이터를 이용한 Dynamic Routes

  Next.js 는 외부 데이터로 경로 및 페이지 정적으로 생성하게 해줌

  • getStaticPaths

    SSG 미리 작업할 수 있도록 id(동적 라우팅) 될 수 있는 값들 list 가지고 있는(paths) 객체 fallback 과 함께 return 해야 함

    return 되는 list 의 각 요소는 객체이며 각 객체는 params 키를 가지고 있어야 하며 params 안에는 파일 이름 키를 가지는 객체가 있어야 함

    개발모드에서는 매 요청마다 실행되며 프로덕션에서는 빌드때 한번 실행됨

  • getStaticProps

    주어진 id 로 필요한 데이터 가져옴

    id 를 포함한 id 제공됨

• 동적 페이지

  파일 이름이 “[” 로 시작해서 “]”로 끝남

• Dynamic Routes 세부 사항

  • 외부 API 가져오거나 DB 에 쿼리 날리기

    getStaticPath 는 외부 API 사용하거나 DB 에 쿼리 날리기 가능

  • Fallback

    True or False 값 가짐
    
    - false 일 경우
    
        getStaticPaths 에서 리턴되지 않은 경로는 404 페이지 뜸
    
    - true 일 경우
    
        빌드시 생성되지 않은 페이지는 404 페이지가 되지 않고 페이지의 "fallback" 버전 제공
    
        백그라운드에서 Next 가 요청된 경로 정적으로 생성되며 같은 경로에 들어온 후속 요청은 생성된 페이지 제공
    

  • 포괄 라우트

    파일명 괄호 안에 세 개의 점("...") 추가하는 것으로 확장 가능
    
    getStaticPaths 에 이를 해두면 배열을 "id" 키의 값으로 리턴해야 함
    
    params.id 는 getStaticProps 내의 배열이 됨
    

  • 라우터

    useRouter hook 으로 Next.js 라우터에 접근

  • 404 페이지

    pages/404.js 생성으로 커스텀 404 페이지 생성

    빌드시 정적으로 생성됨