TIL 66 | Routing, Dynamic Routes

Routing, Dynamic Routes in NEXT

• NEXT.js에서는 React와 달리, 위처럼 폴더 구조를 기반으로 라우팅 기능을 제공한다.

• pages/index는 기본 라우트 경로인 /을 뜻하며, pages/hello는 /hello 라우트 경로를 뜻한다.

• Dynamic Routes의 경우, pages 경로 밑에 [] 형태를 가진 파일이 존재해야 한다.

getStaticPaths

export async function getStaticPaths() {
  return {
    paths: [{ params: { id: 1 } }, { params: { id: 2 } }], // array 형태
    fallback: true, // boolean 형태
  };
}

• 동적 라우팅 기능을 구현하기 위해서 NEXT.js에서 제공하는 getStaticPaths라는 함수를 사용한다.

• 해당 함수를 사용하게 되면, 지정된 경로를 모두 pre-rendering할 수 있게 된다.

• 전체 리턴값은 object 형태이며 path, required에 해당하는 값은 필수로 리턴돼야 한다.

paths

• 동적으로 변할 라우팅 값은, paths의 값인 array 형태로 리턴되어야 한다.

• params의 첫번째 속성명은 동적 라우팅을 구현하고자 하는 페이지 폴더 안의 파일 명과 동일해야 한다.

fallback

• fallback 값은 boolean 형태이다.

• fallback이 지정되지 않으면, 빌드 과정에서 오류를 갖게 된다.

1. false

   • fallback을 false로 지정할 경우 getStaticPaths에 의해 리턴된 라우트 경로 이외의 경로로 접근하였을때 404 page를 보여주게 된다.

   • 적은 숫자의 path만 pre-rendering 해야하는 경우, 새로운 페이지가 추가 될 일이 많지 않은 경우 사용한다.

2. true

   • fallback을 true값으로 지정할 경우, 빌드된 라우팅 페이지 경로로 접속했을때 getStaticProps pre-rendering 이 끝나기 전까지 fallback pages(ex> 로딩중) 를 띄울 수 있다.

   • 새로 요청된 라우트 경로에 대해서는, getStaticProps 로 HTML파일과 JSON 파일을 만들어낸 후 이를 바탕으로 새로운 페이지를 렌더링하여 화면을 보여준다.

   • 데이터에 의존적인 정적 페이지가 많으나, 빌드할 때 모든 페이지를 생성하기에는 너무 큰 작업일때 사용하기 적절하다.

Reference

NEXTjs pages