지금까지 next.js를 사용하지 않은 순수 react 프로젝트에서는 페이지별 라우팅을 걸 때 react-router-dom을 사용하여 다음과 같은 코드를 작성했다.
이와 같이 url경로를 설정하고 해당 url에 도달했을 때 보여줄 page component를 등록하여 구현이 가능하였다.
하지만 next.js에서는 react-router-dom 라이브버리를 사용하지 않고, JSX, js코드를 전혀 사용하지 않는다.
이를 대체하여 next.js에서는 /pages 라는 폴더를 만들고 이 안에 폴더 혹은 js파일을 생성하여 이후 자동으로 이 폴더를 확인하게 된다.
1. pages 폴더를 이용한 페이지&파일 기반 라우팅
이 폴더 구조를 보면 pages라는 폴더안에 index.js, about.js 파일이 두개가 있고, portfolio라는 폴더안에 index.js, list.js 파일이 두개가 있다.
먼저 next.js에서는 pages라는 폴더를 라우팅 할 때 반드시 필요로 하는 필수 폴더로 지정하고 사용하고 있다. pages폴더 내부의 index.js는 자동으로 메인페이지가 되고, about.js파일은 파일이름에 맞게 하위 디렉토리로 형성이 된다.
localhost:3000 -> index.js
localhost:3000/about -> about.js
about.js 파일과 같이 따로 폴더를 만들지 않고 이와 같이 하위 디렉토리를 만들 수 있지만 폴더를 만들어서 구조화할 수 있다.
localhost:3000/portfolio -> portfolio폴더의 index.js
localhost:3000/portfolio/list -> portfolio폴더의 list.js
2. 동적으로 생성된 url에 접근하는 법
이번에는 pages폴더 내부에 clients라는 폴더를 추가하고 여기 기본적으로 index.js 파일을 생성했다. 그리고 동적으로 페이지에 접근하기 위한 [id]라는 폴더를 만들었고 내부에 index.js파일과 또 동적으로 접근가능한 파일인 [clientprojectid].js 파일을 만들었다.
쉽게 설명하자면
사용자 여러명을 관리하기 위한 clients 폴더가 있고 이에 각 사용자들이 있을 것이다. 그 중 한 사용자에게 접근하기 위해서 [id] 폴더를 사용해 동적으로 접근할 수 있다. 그 특정 사용자에게는 또 여러가지 projects들이 들어있을 수 있는데 이 중 하나에 접근하기 위해 [clientprojectid].js 파일을 사용하여 접근이 가능하다
localhost:3000/clients/hwarang -> clients/[id]/index.js
localhost:3000/clients/hwarang/1 -> clients/[id]/[clientprojectid].js
이와 같이 []를 사용하여 동적으로 페이지에 접근 했을 때 그에 대한 url 정보를 가져오기 위해 next.js에서 제공하는 useRouter를 사용할 수 있다.
이와 같이 useRouter를 활용하여 url의 정보를 가져오면
[id] 에는 hwarang, [clientprojectid]에는 1이 입력되었음을 알 수 있다.
3. Catch-all 라우트 추가하기
이번에는 pages폴더 아래 blog폴더 안에 다음과 같이 [...slug].js 라는 이름의 파일을 만들었다. 이 파일 또한 []를 사용한것으로 동적 경로를 사용할 것이라 추측할 수 있다. 그렇다면 ...은 왜 사용한 것일까?
예를 들어 url이 localhost:3000/blog/2023/06 과 같이 어떤 특정 월에 작성된 blog만 모아서 보고싶다면? 이 동적 url 세그먼트를 어떻게 추출할 수 있을까??
이때 파일 이름을 이와 같이 [...작명].js로 하고 useRouter를 사용하여 query를 콘솔에 찍어보면
이와 같이 2023, 06 두가지 항목이 /를 기준으로 나뉘어 배열에 들어가는 것을 볼 수 있다.
4. Link 컴포넌트로 navigate하기
이건 React에서 react-router-dom 라이브러리와 거의 유사하다.
1. next/link로 부터 Link를 import 해온다. (이때 Link는 {}를 안써야함)
2. 필요한 곳에 사용하면 됨. href={} 속성을 사용해서!
5. 프로그래밍 방식으로 navigate하기
어떤 버튼을 클릭했을 때 onClick(loadProjectHandler) 의 속성이 있다.
이때 router.push() 메서드를 사용하여 해당 url로 페이지를 이동시킬 수 있다.
6. 404페이지 만들기
pages폴더 최상단에 404.js 파일을 만들면 next.js가 자동으로 이를 읽어 404에러가 났을 때 이 파일의 내용을 보여준다.
