Next.JS의 동적라우트

개요

---

Next.js를 이용하여 개인 프로젝트 진행중 url 라우팅을 해야하는데 기존 React와 조금 다른 방식인걸 확인하여 정리를 해본다 물론 크게 다르진 않다!

기본 동작 방식

---

• React 작동 방식

 <div>
      <Link to="/about">Go to About</Link>
 </div>

React의 경우는 to를 이용하여 라우팅을 지원한다.

• Next.js 작동방식

<Link href="/about">
	<a>Go to About</a>
</Link>

Next.js의 경우는 href로 지원하며 이는 기존 a태그랑 비슷하게 동작한다.

동적 라우팅 방식

---

• React 작동방식
  1.React Router를 사용하여 동적 라우팅을 구현
  2.react-router-dom 패키지에서 useParams 훅을 사용하여 URL의 동적 파라미터를 추출
  3.동적 파라미터는 URL의 경로에 :parameterName 형식으로 지정

기본적으로 동작하는 방식이며

<Router>
  <Switch>
    <Route path="/product/:productId">
    	<ProductDetail />
    </Route>
  </Switch>
</Router>

간단한 코드로 보면 이런 형태로 라우팅을 진행한다.

• Next.js 작동방식
  1.Next.js에서는 파일 시스템 기반 라우팅을 지원하므로, 페이지 파일의 이름을 [parameterName].js(x) 형식으로 지정하여 동적 라우팅을 구현
  2.useRouter 훅을 사용하여 동적 파라미터를 추출.
  3.동적 파라미터는 페이지 파일 이름에서 [parameterName] 형식으로 지정

const router = useRouter();
const { productId } = router.query; // 동적 파라미터 추출

 return (
   <div>
     Product ID: {productId}
   </div>
 );

이방법이 가장 기본적인 방법이다.

결론

---

React와 Next.js 동작방식이 살짝 다른데 잘알아둬야 할것같고 next.js에서는 url 보내는 방법이 또 살짝씩 다른게 있는데 이는 동적라우팅에서 React Query를 쓸때 값을 못가져오는 이슈가 있던데 이와함께 다시 포스팅할 예정이다! 갈길이 멀구나!