NextJS Routing

파일 기반의 라우팅이란?

NextJS는 pages 라는 폴더를 만들고 그 안에 파일을 넣게 되면 파일 이름에 따른 라우팅이 가능하다.

/pages

ㄴ index.js

ㄴ about.js

ㄴ /products

ㄴ index.js

ㄴ [id].js

어떤 식으로 작동하는가?

pages 폴더를 확인하고 우리가 지원하고자 하는 라우터 몇개를 추론한다.

index.js를 확인하고 my-domain.com/ 으로 보내고 해당 경로로 보낸다.

about.js를 확인하고 my-domain.con/about 으로 경로를 취한다.

[id].js 같은 경우는 동적 경로를 추가하는데 사용된다.

ex) my-domain.com/about/1

index.js 같은 경우에는 일반적인 도메인으로 들어가면 나오는 화면이다.

중첩 라우팅을 하고싶은 경우엔 pages 폴더에 하위 폴더를 만들고 거기에 index.js 파일을 만든다.

동적 라우팅을 하고싶은 경우 [지정하고싶은_이름].js 식으로 작성하면 된다.

여러 종류의 데이터를 불러와야하는 페이지를 만들때 동적 라우팅을 사용하는 것이 좋다.

구체적인 id를 통하여 db에 접근 가능하고 db에서 페칭한 데이터를 이 컴포넌트에 가져와서 화면에 출력!

구체적인 id에 접근하는 법

import {useRouter} from 'next/router';

...
const router = useRouter();

console.log(router.query); // 이 경우에 구체적인 값에 접근할 수 있다. 

중첩된 동적 경로

/clients

ㄴ/[id]

ㄴindex.js

ㄴ[clientProjectId].js

catch-all 라우팅

파일 이름으로 중괄호와 식별자만 작성하지 않고 구문이나 특수한 표기법을 추가할 수 있다.

[…slug].js 이런식으로 작성하고 /blog/2022/12 주소로 이동하고 router.query를 확인해본다.

그러면 slug: [2022, 12] 배열을 받을 수 있을것이다.

Link 컴포넌트로 네비게이팅하기

import Link from 'next/link';
...
<Link href="/home">Home</Link>

<Link href="/home/dynamic">Dynamic</Link>

또는

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

*NextJS 13버전에서의 Link 컴포넌트와 이전 버전에서의 Link 컴포넌트

//NextJS 13
<Link href="/">링크링크</Link>

//NextJS 13 이하
<Link href="/"><a>링크링크</a></Link>

프로그래밍 방식으로 라우팅 처리

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

/portfolio

ㄴindex.js

ㄴlist.js

ㄴ[projectId].js

구조를 가지고 있다고하자. /portfolio/1, /portfolio/ten 등의 주소로 접근하게되면 [projectId].js 파일에 작성된 컴포넌트가 보이게된다.

하지만 /portfolio/list 주소로 이동하게되면 list 컴포넌트가 보여지게된다.

이는 NextJS에서 동적 라우팅보다 정적 라우팅의 우선순위가 더 높다는 것을 알 수 있다.

404 페이지 커스텀

그냥 pages 폴더에 404.js 파일을 만들고 거기에 커스텀 하면 끝!

마지막으로 파일 기반 라우팅과 코드 기반 라우팅의 차이

파일 기반 라우팅

• 추가로 작성해야할 상용구 코드가 없다. 원하는 경로를 파일로 저장하기만 하면 된다.

코드 기반 라우팅

• 코드 내에 추가로 상용구 코드를 작성해야함.