react 에서는 동적 라우터를 사용하기 위해 react router dom 을 이용하여 라우팅을 하지만
next에서는 pages폴더 안에 index.js 파일을 가지고 라우팅을 한다.
Next에서 라우팅을 하는것을 알아보자
├─pages
│ | -app.js
│ │ index.js
│ └─ about
│ index.js
pages가 이런구조라면 우리 보여질 첫 페이지는 page안에 index.js이다. 이 index.js 경로가 http://localhost:3000/이라면
about 페이지는 http://localhost:3000/about 일것이다.물론 about 페이지의 문서는 about 폴더 안에 index.js 일것이다.
react에서의 동적 라우팅은
<Routes>
<Route path="/" element={<Main />} />
<Route path="/github" element={<Github />} />
<Route path="/board" element={<Board />} />
<Route path="/board/create" element={<BoardCreate />} />
<Route path="/board/:id" element={<BoardDtail />} />
<Route path="/board/update/:id" element={<BoardUpdate />} />
<Route path="/messenger/*" element={<Messenger />} />
<Route path="/admin/*" element={<Admin />} />
</Routes>
이렇게 router dom을 이용할것이다.하지만 next에서는
├─pages
│ | -app.js
│ │ index.js
│ └─ about
│ index.js
| [id].js
이런식으로 대가로 안에 값을 넣어서 동적 라우팅을 하게 된다.
이 아이디 값을 받아 오는 방법은
import { useRouter } from 'next/router';
const Ex = () =>{
const router = useRouter();
query
return (
<div>
<h1>{router.query.id}</h1>
</div>
)
}
export default Ex;
query.id값을 가지고오면 query id값을 가지고 올수있다.
├─pages
│ | -app.js
│ │ index.js
│ └─ about
│ | index.js
| └─[id]
| |
| └─ index.js
| [ids].js
이렇게 http://localhost:3000/[id]/[ids] 의 중첩 라우팅이 가능하다.