정적라우팅(Static Routing)과 동적라우팅(Dynamic Routing)

Next와 정정라우팅&동적라우팅

Next.js는 파일 시스템 기반 정적라우팅(Static Routing)과 동적라우팅(Dynamic Routing)을 지원함

 

정적라우팅은 직접 경로를 일일히 설정을 해주는 것이고 동적라우팅은 한번 설정 해주면 라우팅 프로토콜을 통해 알아서 계산되어 경로가 정해짐

 

Next.js를 npm 명령어를 통해 CLI로 프로젝트를 구성해보면 'pages'라는 폴더가 생김

 

이 pages 폴더에 라우팅 하고 싶은 이름으로된 .js(.jsx 또는 Typescript를 사용한다면 .tsx) 파일을 만들어줌

그 후 Next.js에서 지원하는 useRouter 함수나 Link 컴포넌트를 통해 만들어준 .js의 이름을 경로로 설정해 주면 됨

 

---

정적 라우팅(Static Rourting)

pages아래에 페이지 생성

정적 라우팅은 해당 pages 폴더에 원하는 이름의 페이지를 생성하기만 하면 됨

 

---

동적 라우팅(Dynamic Rourting)

마찬가지로 pages 폴더에 .js 파일을 만들어주는데 여기서 이름에 대괄호([])를 써주는 것이 특징

pages에 [].js 파일 생성

이름에 대괄호를 사용해줌으로써 이 페이지는 동적으로 라우팅이 된다는 것을 인식하게 됨

여기서 페이지의 이름은 임의로 설정해줘도 무관함