[Next.js] 라우팅 (Routing) (Page Router ver.)

 

 

Next.js에서 Page Router 버전에서의 라우팅 방식을 알아보자!

---

특정 URL을 위한 페이지를 만들 때 파일 및 폴더 구조를 어떻게 설정해야하는지 알아보자.

 

 

 1. pages > 파일 

 

pages 안에 바로 파일을 만들면, 그 파일이름은 해당경로 이름이 된다.
예를 들어, pages > main.tsx 파일을 만들면
URL은 http://localhost:3000/main 이 된다.

 

 

 

 2. pages > 폴더 > index.tsx 파일 

 

pages 안에 main이라는 폴더를 만들고, 안에 index.tsx 파일을 만들면,
이 경우에도 URL은 http://localhost:3000/main 이 된다.
main 폴더 안에 있는 index.tsx 파일은 해당 폴더(main)를 기본 라우트로 연결해주기 때문이다.
즉, index.tsx 파일을 사용하면 해당 폴더가 라우트 경로로 그대로 연결된다.

 

 

 

 3. pages > 폴더 > 파일 

 

pages 안에 main이라는 폴더를 만들고, 안에 search.tsx 파일을 만들면,
이 경우에는 URL이 http://localhost:3000/main/search 가 된다.
다른 이름을 사용하면 그 파일명이 URL의 마지막 부분에 추가되는 방식이다.

 

 

 4. 쿼리 스트링 만드는 법 

 

import { useRouter } from "next/router";

export default function Page() {

  const router = useRouter(); // router 객체
  
  return <h1>Search</h1>
}

 



URL을 다음과 같이 작성하고, console.log(router)를 해보면, 콘솔에 아래와 같이 router 객체가 뜬다.

 

여기서 router 객체의 query를 보면, 아까 URL에 작성했던 쿼리스트링이 뜬다. 이거를 이용하는 것이다.

 

import { useRouter } from "next/router";

export default function Page() {
  const router = useRouter(); // router 객체
  const q = router.query.q;

  return <h1>Search {q}</h1>
}

 

 

 

 

 5. URL 파라미터 만드는 법 

 

page안에 book이라는 폴더를 만들고, 안에 [id].tsx라는 파일을 만들면, NEXT가 이 파일을 동적 경로에 대응하는 파일이라고 인식하게 된다.

 URL 파라미터의 값이 뭐가 되든, 파일에 작성된 컴포넌트를 페이지로써 화면에 렌더링 되도록 설정이 된다.

 

 

 

 

URL 파라미터의 값을 페이지 컴포넌트에서 꺼내서 사용하려면, useRouter 훅을 불러와서 쓰면 된다.

 

import { useRouter } from "next/router";

export default function Page() {
  const router = useRouter();
  console.log(router);
  
  return <h1>book</h1>
}

 

 

URL을 다음과 같이 작성하고, console.log(router)를 해보면, 콘솔에 아래와 같이 router 객체가 뜬다.

 

 

여기서 router 객체의 query를 보면, 아까 URL에 작성했던 파라미터 값(여기서는 id)이 뜬다. 이거를 이용하는 것이다.

 

import { useRouter } from "next/router";

export default function Page() {
  const router = useRouter();
  const id = router.query.id;

  return <h1>book {id}</h1>
}

 

 

 

만약 아래와 같이 id가 연달아 구성된 URL의 페이지를 만들고 싶으면 어떻게 해야할까?

 

 

이런경우에는 파일명을 [...id].tsx 이런식으로 바꾸면 된다.

이것을 모든 구간을 잡아채겠다는 뜻에서 "Catch All Segment" 라고 부른다.

 

 

이렇게 전달된 여러개의 URL 파라미터들은 컴포넌트에 id라는 변수에 배열 형식으로 저장된다.

 

import { useRouter } from "next/router";

export default function Page() {
  const router = useRouter();
  const id = router.query.id;

  console.log(id); // 콘솔로 id 찍어보기
  
  return <h1>book {id}</h1>
}

 

 

여기서 주의 할 점은, Catch All Segment로도 대응할 수 없는 경로가 한가지 있다.
그것은 index경로이다. (여기서는 localhost:3000/book)

 

만약 /book 뒤에 어떤 경로가 나오든 안나오든 모두 다 범용적으로 대응이 되게끔 하고 싶다면, 파일의 이름을 대괄호로 한번만 더 감싸주면 된다.

이것을 "Optional Catch All Segment" 라고 부른다.