NextJs는 react.js를 사용하는 SSR(Server-Side Rendering) 프레임워크이다.
그래서 reactJs의 라이브러리를 사용하지만, reactjs와 다르게 프레임워크이기에 router 등록 방식이 조금 다르다.
기존에 react.js에서는
<Routes>
<Route path={'/home'} element={<Home />}
</Routes>
과 같은 방식으로 일일히 route의 path와 이동할 컴포넌트를 지정했지만, next.js에서는 파일명으로만 자동으로 인식하여 이동한다.
처음 nextjs를 생성하면 안에 pages라는 폴더가 있는데, pages폴더에 파일명을 입력하여 tsx나 jsx파일을 생성하면 자동으로 그 파일의 이름으로 router가 지정된다.
index.jsx 파일로 만들경우 기본 경로로 지정이 된다.
폴더안에 파일을 만들경우, 폴더명/파일명 으로 url이 지정된다.
ex) test 폴더 내부에 text.tsx파일을 생성할 경우 경로는
{주소}/test/text
처럼 설정이 된다.
만약 id값과 같이 가변형 url을 입력하고 싶을 경우
[쿼리명].tsx 으로 파일을 생성하면 된다.
위와같이 test/123 와 같이 id값을 가변형으로 하고싶은 경우,
test폴더 내부에 [id].tsx 파일을 생성해주면 된다.
이러한 경우
const router = useRouter();
const id = router.query.id;와 같은 방식으로 query값을 읽어올 수 있다.
만약 getStaticProps를 사용하기 위해서 가변형 url에 페이지에서 파라미터 값을 받아올려고, 아마 제대로 동작이 되지 않을 것이다.
왜냐하면 getStaticPaths라는 함수를 통하여, 빌드 시에 id값을 정적으로 생성하고, 페이지 컴포넌트로서 사용해야되기 때문이다.
이러한 방식에 대한 글은 다음에 다시 쓰도록 하겠다.
router를 직접 설정하지 않아도 된다는 점에서는 react보다 편하다고 생각할 수도 있다.