Next.js에서의 라우팅 (페이지 이동)

Next.js에서 라우팅

Next.js에서 페이지 이동을 하는 방법은 파일(폴더) 기반 라우팅임

먼저 구조와 요소에 대해서 알아야 함

구조와 요소

• Tree
  계층 구조를 시각적으로 보기 위한 규칙 (위 -> 아래)임
  DOM Tree도 같은 구조를 가짐, 큰 틀
• SubTree
  tree의 한 부분임. root부터 시작하고 leaf들에 이르기까지의 범위
• Root
  tree 또는 subtree의 첫 번째 부분임. root layout처럼 가장 첫 번째 노드, 요소
• Leaf
  children이 없는 마지막 노드, 요소

---

URL 관련 용어 정리

URL은 크게 도메인과 Path 부분으로 나뉨

• URL Segment
  슬래시로 분류된 URL path의 한 부분임
• URL Path, Pathname
  앞에 있는 도메인을 제외한 뒷 부분에 있는 전체임

---

File System Based Routing

폴더 구조를 통해 라우팅을 자동으로 만들어주는 개념임
Nesting folders를 만들면서 라우팅이 자동으로 생성됨
page.tsx를 통해 각각의 path 별로 main UI가 표현되는 곳을 만들어 주며 개발함

• 정적 라우팅
  정적 라우팅은 Next.js에서 미리 정의된 경로에 대해 고정된 페이지를 제공하는 방식
  
• 동적 라우팅
  리액트에서 특정 경로가 동적인 경우 파라미터에 의해 계속 변할 때 사용했던 변수명을 Pathname에 넣어주어야 했음

<Route path="/products/" element={<Product />} />

• Next.js에서는 하나의 세그먼트 안에다가 [id] 구조로 파라미터를 지정해주면 됨특정 폴더를 세그먼트로 사용하고 싶지 않다면 ()로 감싸주면 됨

src/app/세그먼트/[파라미터]

• 세그먼트가 너무 길어지는 문제들이 발생하기 전, 중간에 레이아웃이나 특수 파일만 필요할 때 라우트 그룹핑한 뒤 ()를 사용하여 불필요한 세그먼트를 방지할 수 있음

---

페이지 이동 관련 기능 목록

 

Link

기본 HTML <a> 태그를 확장한 개념임
Next.js에서는 Link 태그를 사용하는 이유는 두 가지 주요 역할 때문임

• Link 태그는 prefetching을 지원함
  뷰포트에 링크가 나타나는 순간 해당 페이지의 코드와 데이터를 미리 가져옴
  뷰포트는 현재 보이는 부분을 나타냄
• Route 사이에 client-side navigation을 지원함
  브라우저가 새 페이지를 로드하기 위해 서버에 요청을 보내는 대신 클라이언트 측에서 페이지를 바꾸어 주기 때문에 페이지 전환 시 더 나은 UX를 제공함

 

useRouter

useRouter를 사용하면 로직 안에서 많은 것들을 처리할 수 있지만, 크롤러(검색엔진) 입장에서는 <a> 태그를 알아차릴 수 없어 SEO에는 조금 불리함
그러나 로직의 순서에 따라 이동을 하는 것이 꼭 필요하다면 useRouter를 통해 이동하면 됨

• useRouter를 import 할 땐 router 말고 navigation으로 import 해주면 됨
  특정 비동기 이후 라우터 이동이 필요할 때 유용함

  router의 메소드들

• push
  새로운 URL을 히스토리 스택에 추가함
  push로 페이지를 이동하면 이동한 페이지의 URL이 히스토리 스택 맨 위에 쌓임
• replace
  현재 URL을 히스토리 스택에서 새로운 URL로 대체함
  현재 페이지의 URL이 새로운 URL로 교체되고, 뒤로 가기 클릭 시 이전 페이지로 이동하고 교체된 페이지로는 이동이 불가능함
• back
  히스토리 스택을 한 단계 뒤로 이동시킴 (뒤로가기)
• reload
  현재 페이지를 새로 고침함
  히스토리 스택에는 영향을 미치지 않지만 페이지의 데이터를 최신 상태로 업데이트하고 싶을 때 사용함
  (조금 더 향상된 사용자 경험을 줄 수 있음)

 

 

 

 

지금까지 폴더 기반으로 페이지 이동하는 경우는 없었는데

뭔가 편할 것 같기도 하고 아직은 잘 모르겠는데 신기함