Next의 라우팅

React 에서의 동적 router

react 에서는 동적 라우터를 사용하기 위해 react router dom 을 이용하여 라우팅을 하지만

next에서는 pages폴더 안에 index.js 파일을 가지고 라우팅을 한다.

Next 라우터

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 일것이다.

Next에서의 동적 라우팅

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] 의 중첩 라우팅이 가능하다.