프론트엔드개발자 - NextJs!시작하기(4): 페이지 라우팅 (Dynamic Routes)

 

오늘은! NextJs에서 페이지를 이동하는 방법에 대해서 알아보도록 합시다!

 

NextJs는 pages directory의 .js .ts .jsx .tsx 파일을 기반으로 페이지가 라우팅되는 시스템을 가져요!

 

예를 들면, React를 한다면 아래처럼 react-router-dom을 사용하여 설정해야 하죠...

<Routes>
    <Route path='/' element={<Main/>} />
    <Route path='/about' element={<About />} />
</Routes>

 

사실 저는 위와 같은 페이지 라우팅 방식이 너무 귀찮아서 ,,,,,

Next만 사용해요...(못쓴다고 한적은 없슴다!!)

 

Next에선 위의 방식들이 전혀 필요가 없게 되는데요!

 

처음에 말했듯이 pages directory의 파일을 기반으로 라우팅되기 때문입니다!

 

예를 들면 메인 페이지같은 경우는 pages/index.tsx 가 되고요!

about 페이지는 pages/about/index.tsx 를 만들면 페이지가 생성되고 끝...!

 

 

예를들어 위의 폴더 구조를 보면 /about을 /career /first /tech 경로들이 있는겁니다!

위의 /first 파일경로를 가보면 아래처럼 페이지가 나오게 됩니당

이렇기때문에! 페이지라우팅에서 너무 좋은 장점을 갖고 있어서 Next만 써요!

 

그리고 Dynamic Routes를 사용하는 방법도 있습니다.

 

/board/:boardId 이런식의 루트가 있으면 boardId에 따라 마지막 경로가 계속 변할텐데요!

이 변하는 부분을 Dynamic Routes로 해결할 수 있어요

 

위의 경로로 pages/board/[boardId]/index.tsx 경로로 게시글을 만든다면 다이나믹 루트가 적용됩니다!

[boardId] 이렇게 대괄호를 씌워주면 적용 가능!!

 

위의 사진들처럼 뒤에 어떤 값을 넣어도 페이지가 정상적으로 라우팅되는 것을 확인할 수 있죠!!

 

물론 이 페이지가 이상한 번호가 들어오면 해결하는 방법도 있어요!

 

getStaticPaths 통해서 가능한 경로를 설정하여 그것을 제외한 경로는 404 페이지로 route 되도록 하는거죠!!

 

 

이렇게 NextJs로 간편한 라우팅 방식을 이용해봅시다!!

 

 

다음 포스팅은 프론트엔드개발자 - NextJs!시작하기(5) : Component의 Props 이해하기 (Children, rest)

다다음 포스팅은 프론트엔드개발자 - NextJs!시작하기(6): TailwindCSS를 사용한 개발속도 up!!