NEXT.js
에서는 React
와 달리, 위처럼 폴더 구조를 기반으로 라우팅 기능을 제공한다.
pages/index
는 기본 라우트 경로인 /
을 뜻하며, pages/hello
는 /hello
라우트 경로를 뜻한다.
Dynamic Routes
의 경우, pages
경로 밑에 []
형태를 가진 파일이 존재해야 한다.
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
의 값인 array
형태로 리턴되어야 한다.
params
의 첫번째 속성명은 동적 라우팅을 구현하고자 하는 페이지 폴더 안의 파일 명과 동일해야 한다.
fallback
값은 boolean
형태이다.
fallback
이 지정되지 않으면, 빌드 과정에서 오류를 갖게 된다.
false
fallback
을 false
로 지정할 경우 getStaticPaths
에 의해 리턴된 라우트 경로 이외의 경로로 접근하였을때 404 page를 보여주게 된다.
적은 숫자의 path
만 pre-rendering
해야하는 경우, 새로운 페이지가 추가 될 일이 많지 않은 경우 사용한다.
true
fallback
을 true
값으로 지정할 경우, 빌드된 라우팅 페이지 경로로 접속했을때 getStaticProps
pre-rendering
이 끝나기 전까지 fallback pages
(ex> 로딩중) 를 띄울 수 있다.
새로 요청된 라우트 경로에 대해서는, getStaticProps
로 HTML파일과 JSON 파일을 만들어낸 후 이를 바탕으로 새로운 페이지를 렌더링하여 화면을 보여준다.
데이터에 의존적인 정적 페이지가 많으나, 빌드할 때 모든 페이지를 생성하기에는 너무 큰 작업일때 사용하기 적절하다.