NextJS - 페이지 & 파일 기반 라우팅

1. 파일 기반 라우팅

* 파일 구조

/pages

    - index.js                : my-domain/

    - about.js                : my-domain/about

    - /products

         - index.js           : my-domain/products

         - [id].js               : my-domain/products/1  → 동적인 경로 제공

 

- [...식별자].js : 여러 세그먼트의 문자열을 배열로 반환

 

 

2. Link

* replace

- 새로운 페이지를 또 띄우지 않고 현재 페이지를 새 페이지로 변경, 뒤로 가기 X

<Link replace href="#"></Link>

 

* href

<Link href={`/clients/${client.id}`}>{client.name}</Link>

<Link href={{
    pathname:'/clients/[id]',
    query: {id: client.id}
}}>{client.name}</Link>

 - NextJS 만의 herf 설정 방법

 

3. router

* router.pathname

* router.query

* router.push() : Link와 같은 동작

//1
router.push('/clients/max/projecta');

//2
router.push({
    pathname:'/clients/[id]/[clientprojectid]',
    query: {id:'max',clientprojectid:'projecta'}
});

* router.replace() : 현재 페이지를 코드의 페이지로 대체, 즉, 페이지 이동 후에는 되돌아갈 수 없다.

 

 

 

파일기반 VS 코드기반 라우팅

File-based Routing (NextJS)	Code-based Routing (React + react-router)
- 추가로 작성할 상용구 코드 X - 컴포넌트 생성 및 저장이 더 직관적인 시스템 - 파일과 폴더 구조만 있으면 된다. - 페이지를 이동할 땐 <Link> 컴포넌트 사용하고 명령형으로도 이동 가능	- 추가적인 상용구 코드 작성    ( 장점 : 어떤 라우트를 지원하지는 코드로 확인가능 ) - 파일 시스템을 살펴볼 필요 X - Switch나 Route 같은 새로운 컴포넌트 공부 - 파일과 폴더 설정이 중요 X - 코드 기반 라우팅에선 원하는 곳에  컴포넌트 파일 저장