next.js 프로젝트를 설치하고, App 라우팅에 대해 알아보겠습니다.
새로 프로젝트를 만들면서, 어떤 구조로 짤지 고민을 많이 했는데,,,,
오늘은 app 라우팅에 배우고, component나 style에 관한 것은 다음에 포스팅 하겠습니다 😀
Next.js 14 프로젝트 설치
npx create-next-app 프로젝트명
App 라우터와 Page 라우터의 차이점
Next.js에는 앱 라우터와 페이지 라우터라는 두 가지 라우터가 있습니다.
App 라우터는 서버 구성 요소 및 스트리밍 같은 React의 최신 기능을 사용할 수 있는 최신 라우터입니다.
Pages 라우터는 서버에서 렌더링된 React 애플리케이션을 구축할 수 있게 해줍니다.
App 라우팅
Next.js가 새롭게 도입한 App router 방식은 파일시스템 베이스 방식으로 라우팅이 작동됩니다.
즉, 폴더와 파일로 라우팅을 구성하는 것인데,
기본적인 Next.js의 Routing Convention이 있습니다.
- 폴더 이름이 브라우저에서 보이는 URL의 path가 됩니다.
1. URL 경로에 영향을 주지 않고 경로를 구성하는 방법
URL에 영향을 주지 않고 경로를 구성하려면 관련 경로와 함께 그룹을 만들면 됩니다.
괄호 안의 폴더는 URL에서 생략됩니다.
그 안에서 경로를 추가하려면 about과 같은 폴더를 하나 만든 뒤 그 안에 page.js (page.tsx) 파일을 만들면 됩니다.
직접 프로젝트에 설정해봅시다.
citizen
|_ device
|_ profile
goverment
|_ management
|_ statistics
main
|_ main
각각의 폴더 안에는 page.js (page.tsx) 파일이 존재해야 합니다.
만약, 루트 page.tsx 파일에서 Link를 활용하여 해당 페이지를 불러오기 위해서는 바로 폴더명으로 지정해주시면 됩니다.
이런 방식으로 말이죠 :)
2. Dynamic Routes (동적 라우팅)
마무리
Next.js의 장점과 함께 마무리하겠습니다 :)
리액트에서는 라우팅 할 때 아래 방식으로 컴포넌트와 주소를 연결하는 과정이 필요했습니다.
const Router = () => (
<Routes>
<Route exact path='/main' element={<Main />} />
<Route exact path='/login' element={<Login />} />
....
)하지만 Next.js는 이러한 과정 필요 없이 폴더 구조만 제대로 짜면 알아서 라우팅 해줍니다. 🙌
불필요한 요소들 없이 간편하게 Link를 사용해서 라우팅이 가능합니다 !!