Next.js 라우팅이란?
- Next.js는 파일 시스템 기반의 라우팅인
Pages Routers을 제공한다.
Pages 라우팅
파일을 Pages 라는 폴더 안에 생성하면, 자동으로 라우팅이 적용된다.
pages/faqs/index.ts 파일 ⇒ “/faqs” 라는 경로로 자동으로 라우팅이 적용 (따로 라우팅을 적용X 세팅 X)
동적 라우팅
URL 경로에서 변수를 추출하고 동적 데이터를 처리할 수 있도록 함
/blog/[slug].js 파일에서 [slug] 부분은 동적 변수로 취급
Link 컴포넌트
페이지 간 내부 네비게이션을 쉽게 구현할 수 있는 Link 컴포넌트 제공
useRouter 훅
현재 라우트와 관련된 정보들을 가져오고, 페이지 내에서 동적으로 라우팅 조작 가능
Pages Routes (파일 기반 라우팅)
- Next.js는 ‘파일 시스템 기반 라우팅’을 기본적으로 제공함
- 프로젝트의 /pages 디렉토리 내부에 생성된 파일 구조와 URL 경로를 일치 시켜 자동으로 라우팅 됨
- 따라서, 별도의 라우팅 설정이 필요하지 않다
/index.js
: 기본 root 페이지로 매핑되어 http://example.com/ 로 접급할 수 있음
/about.js
: /about 경로로 매핑되어 http://example.com/about 로 접근할 수 있음
/contact/test.js
: /contact/test 경로로 매핑되어 http://exmaple.com/contact/test 로 접근할 수 있음
Dynamic Routes (동적 라우팅)
- 동적 라우팅을 사용하면 URL에서 변수를 추출하고 동적 데이터를 처리할 수 있다.
- 가장 기본적인 ‘파일 시스템’ 을 사용해서 동적 라우팅을 처리할 수 있다. 이를 위해서 파일 및 디렉토리 이름을 [name].js or [id].js 와 같이 대괄호로 묶어야 한다.
Next.js Link 컴포넌트
- next의 link 컴포넌트는 내부 네비게이션을 만들 떄 사용되며, 페이지 간의 이동을 쉽게 처리할 수 있게 해준다.
- SPA와 비슷하게 클라이언트 사이드 라우팅을 가능하게 한다. 따라서 Link 컴포넌트로 만든 링크를 클릭했을 때 페이지는 새로고침 되지 않고 클라이언트 사이드 라우팅이 굉장히 자연스럽게 넘어가게 된다.
Next.js useRouter 훅
- 현재 라우트 정보를 가져오고, 페이지 내에서 동적 라우팅을 제어하는데 사용됨
속성
router.push : 새로운 경로로 이동 (히스토리 쌓임)
router.replace : 현재 페이지를 새로운 경로로 대체 (브라우저의 히스토리 스택을 수정하지 않고 교체 가능)
router.back : 뒤로가기
router.reload : 현재 페이지 다시 로드 (새로고침)
pathname : 현재 페이지 경로
locale : 현재 페이지 언어 local 정보
basePath : 여러 속성 정보를 통해서 현재 페이지의 라우터 확인 가능
