Page Router (2) - Query String, URL Parameter, 404 Page

2026.09.14 · 3분 읽기 · 조회 0

페이지 라우터

페이지 라우터는 저번 포스팅과 같이 폴더명 or 파일명이 경로가 된다.

pages 폴더 내부에 search 폴더를 만들고 index.tsx를 지정하면 해당 파일의 경로는 /search 가 된다.

Query String

일반적으로 검색 기능을 제공하는 곳에서는 쿼리 스트링을 사용한다. /search?q={검색내용} 이런 식으로 url에 직접 기재가 되는 형식이다. 해당 데이터를 가져오는 방법을 알아보자.

export default function Page() {
  return (
    <>
      <h1>search 페이지에요</h1>
    </>
  );
}

이런 식으로 코드를 적어놨을 때, 상단에 useRouter 를 import 해오면 된다.
미리보기가 뜨는데 next/navigation 은 App Router에서 사용되는 패키지이기 때문에 next/router에서 임포트 해오면 된다.

import { useRouter } from "next/router";
 
export default function Page() {
  const router = useRouter();
 
  console.log(router);
  return (
    <>
      <h1>search 페이지에요</h1>
    </>
  );
}

이렇게 가져온 훅을 할당해주면 router 내부에는 라우팅과 관련된 값들이 들어있는 객체가 할당된다.
콘솔에 찍어보면 다음과 같은 값들이 들어있는 것을 확인할 수 있다. query 에 쿼리 스트링 값이 들어있다.

const q = router.query.q
// or
const { q } = router.query;

라고 찍으면 해당 값을 이용할 수 있다.

URL Parameter

책의 상세정보를 불러오는 링크를 생각해보자. 대게 /book/1, /book/2 이런 식으로 뒤의 숫자만 바뀐다. 이때 뒤의 숫자를 URL Parameter라고 부른다. 설정하는 법은 간단하다.

book 폴더 내부에 [id].tsx라는 파일을 만들면 /book/해당 자리에 어떤 값이 들어오던 [id].tsx 파일의 코드를 보여준다. id 말고도 이름은 자유롭게 지정해도 된다.

id값을 가져오는 방법도 간단하다. 위와 똑같이 router 객체를 할당하고 콘솔을 찍어보면
/bookd/2 라는 경로로 이동했을 때
router.query 값 내부에 파라미터가 들어있다. 쿼리스트링과 동일하다고 생각하면 된다.

import { useRouter } from "next/router";
 
export default function Page() {
  const router = useRouter();
  const { id } = router.query;
  return <h1>{id}번째 책</h1>;
}

처럼 간단하게 사용 가능하다.

Catch All Segment

만약 book/123/45/12556 처럼 다수의 파라미터를 받고 싶다면, [id].tsx의 이름을 [...id].tsx로 바꿔주면 된다. 이것을 Catch All Segment 라고 부른다.

이렇게 바꿔주면book/123/45/12556 로 접속이 잘 되고, 각 값들은 id에 배열 형태로 저장이 된다. 로그를 찍어보면 다음과 같이 나오는걸 볼 수 있다.

참고로 [id].tsx 든, [...id].tsx 든 /book 처럼 경로를 아무것도 입력하지 않으면 404 에러가 뜨니까 폴더 내에 index.tsx를 두는 것이 좋다.

또는 파일명을 [[...id]].tsx 로 해주면 /book 같은 경로도 다 받아들일 수 있다.
이를 Optional Catch All Segment 라고 부른다.

404 페이지

현재는 존재하지 않는 경로로 이동했을 때 기본 next의 기본 404 페이지를 보여준다.
해당 화면 또한 커스텀할 수 있다.

그냥 pages폴더 내부에 404.tsx 를 만들면 된다.

그러면 잘못된 경로로 갔을 때, 내가 만들어놓은 화면을 보여줄 수 있다.

댓글

giscus로 동작하며 GitHub Discussions에 저장됩니다.

관련 글