Next.js의 페이지 라우팅
먼저 Page Routing은
주소에 맞춰 페이지를 보여주는 설정입니다.
예를들어
기본 index.tsx에
export default function Home() {
return <h1>인덱스</h1>;
}가 있다면
기본 로컬 주소인 http://localhost:3000/ 입력을 하면 보이게 됩니다.
추가적으로 검색 페이지를 만들어서
http://localhost:3000/search 링크를 들어가면 search 페이지가 라우팅하게 되는 방법은 어떻게 될까?
이 방법은 2가지가 있습니다.
- 기본 pages 폴더 안에서 search.tsx 파일 추가하기
pages/search.tsx 파일을 만든 후
export default function Search() {
return <h1>Search</h1>;
}만들고
http://localhost:3000/search를 들어가면
search.tsx 페이지가 라우팅되는 것을 확인할 수 있습니다.
- pages 폴더안에 search 폴더를 만드는 방법
1번의 방법은 너무 많은 페이지들이 정리 없이 있다보면 가독성이 떨어질 수 있습니다.
그래서 폴더안에 정리하는 방법입니다.
pages/search/index.tsx 를 만들어주고
똑같이 http://localhost:3000/search들어가면 정상적으로 라우팅이 되는것을 볼 수 있습니다.
Next.js의 페이지 라우팅 방식이고 또한 폴더나 페이지들을 중첩해서 연이어 이어지는 중첩 경로도 쉽게 라우팅 할 수 있습니다.
쿼리스트링 설정
보통 search의 경우 localhost:3000/search?q=김명원 과 같이 ?쿼리 스트링으로 전달이 됩니다.
먼저 쿼리스트링은 경로의 끝에 물음표와 함께 명시되는 값인 만큼 페이지 경로 자체에는 영향을 주지 않습니다.
그렇기 때문에 따로 폴더구조를 변경하거나 하지 않습니다.
대신에 전달된 쿼리스트링의 값을 search 페이지 컴포넌트에서 직접 꺼내서 사용을 해야 합니다.
이러한 설정 방법은
useRouter를 사용하면 됩니다. *navigation이 아닌 next/router로 부터 불러와야 합니다.
search 컴포넌트에 Page 함수 안에 router를 객체로 불러옵니다.
const router = useRouter();
router 객체에는 대부분의 라우팅과 관련된 정보가 다 저장되어 있습니다.
console.log(router)를 해보고 개발자 도구로 확인을 해보면
back, push 처럼 페이지를 뒤로 가게 하거나 또는 다른 경로로 이동시키는 메서드도 들어 있습니다.
query라고 해서 전달한 ?q=의 값이 들어있는 것을 확인할 수 있습니다.
추가적으로 객체가 2번이 출력이 나타납니다.
이 상황은 Next.js 앱이 쿼리스트링을 읽는 과정 중에 컴포넌트를 한 번더 렌더링을 시키기 때문입니다.
따라서 첫번째 객체의 query는 비어있고 두번째 객체의 query값이 있는것을 확인할 수 있습니다.
쿼리스트링 값 꺼내오기
이제 쿼리스트링 값을 꺼내오려고 합니다.
객체의 순서에 따라
router.query.q로 접근을 하면 쿼리스트링의 값을 꺼내와서 사용할 수 있습니다.
그렇게 해서 출력 결과 까지 확인해보면
import { useRouter } from "next/router";
export default function Page() {
const router = useRouter();
const q = router.query.q;
return <h1>search {q}</h1>;
}
잘 나오는 것을 확인할 수 있습니다.
URL 파라미터를 사용하는 페이지 생성
예를 들어 책의 상세 페이지를 만드려고 합니다.
http://localhost:3000/book/1 - 1번째 책
http://localhost:3000/book/2 - 2번째 책
...
http://localhost:3000/book/100 - 100번째 책
여기서 URL 파라미터는 book/URL파라미터 입니다. 이러한 URL 파라미터를 사용하는 동적 경로를 갖는 페이지를 생성해보겠습니다.
먼저 Book 경로를 맞춰 pages/book 폴더를 만들어 준 다음에
해달 폴더안에 기존처럼 index.tsx가 아니라 [id].tsx로 파일을 만들어 주면 됩니다.
pages/book/[id].tsx
export default function Page() {
return <h1>Book</h1>;
}이렇게 설정을 하면 Next.js는 id라는 가변적인 값
즉, URL 파라미터를 갖는 동적 경로에 대응하는 파일로 인식합니다.
URL 파라미터 값 사용하기
그러면 입력된 URL 파라미터의 값을 빼와서 사용을 해야합니다.
위에 쿼리스트링이랑 마찬가지로 useRouter를 사용해서 값을 가져오겠습니다.
이번에 id는 어디에 있을까요??
http://localhost:3000/book/2를 검색 하고
생성 후에 console.log를 해보고 개발자 도구를 통해 살펴보면
아까와 똑같이 query라는 객체 안에 id라는 값으로 2가 전달되는 것을 살펴볼 수 있습니다.
import { useRouter } from "next/router";
export default function Page() {
const router = useRouter();
const id = router.query.id;
return <h1>Book {id}</h1>;
}
범용적인 페이지 (Catch All Segment)
만약 경로가 http://localhost:3000/book/2/123/2/12/312/3/123/123/123/
id 값이 연달아 전달되는 경로가 있다면?
이러한 범위에도 대응하는 범용적인 페이지를 만들고 싶다면
파일명을 기존 [id].tsx -> [...id].tsx로 만들어주면 됩니다.
이때 ...은 book 이라는 경로 뒤에 여러 개의 id가 연달아 들어올 수 있고모든 id의 대응하겠다는 뜻입니다.
이러한 것을 Catch ALll Segment라고 부릅니다.
이렇게 받은 id 값은 배열 형태로 저장이 됩니다.
http://localhost:3000/book/2/123/124 입력하고
이때 id를 console.log 해보면
Optional Catch All Segment
하지만 아무리 Catch All Segment라고 해도
http://localhost:3000/book
book 뒤에 경로를 붙이지 않으면 404 not found 오류가 발생합니다.
하지만 위와 같은 오류까지 대범용적으로 만들고 싶다면?
대괄호로 한 번더 감싸주면 됩니다.
[...id].tsx -> [[...id]].tsx
이러한 방법을 Optional Catch All Segment라고 부릅니다.
404 페이지 만들기
잘못된 주소로 들어가면 404 페이지 오류가 나타난 것을 확인할 수 있습니다.
이것을 저희만에 페이지로 나타내주면
먼저 pages/404.tsx 파일을 만들어 줍니다.
export default function Page() {
return <div>존재하지 않는 페이지입니다.</div>;
}그러면 이제부터 브라우저에서 존재하지 않는 경로로 접속했을 때 만들었던 404 페이지가 렌더링이 되는 것을 확인할 수 있습니다.
