라우팅

Next js에서는 File system을 기반으로 라우팅이 된다.

• File system은 pages폴더 아래 있어야하며 src/pages/ 와 pages/ 가 있다면 후자가 우선순위.

✅ 절대경로 설정

src아래 폴더들을 정렬하다보면 뎁스가 많아지면 컴포넌트를 import 할때 ../를 여러번 적어주어야하는데, 이를 방지하기 위해 절대경로를 설정할 수 있다.

jsconfig.json파일에 아래코드 추가

{
  "compilerOptions": {
    "baseUrl": "src"
  },
}

---

✅ slug

👉 slug 파일

wild card처럼 다양한 값을 받을수 있는데, 하나의 파일로 여러 파일을 대체할 수 있다.

1. [slug]

pages / category / [slug].js; // http://www.~~~~.com/category/:slug 와 같음 (ex: http://www.~~~~.com/category/food)

2. [...slug]

무한으로 하위 파일명 추가 가능

pages / category / [...slug].js; // http://www.~~~~.com/category/:slug/:slug/:slug...... 와 같음 (ex: http://www.~~~~.com/category/food/fruit/apple/sweet/.....)

2. [[...slug]].js

옵셔널 slug로, 폴더아래 index.js를 지정해주지 않더라도 접근가능하다.

pages / category / [...slug].js; // http://www.~~~~.com/category 로 접근하면 404에러
pages / category / [[...slug]].js; // category아래 index파일이 없더라도 http://www.~~~~.com/category 로 접근가능.

👉 slug 값의 활용

useRouter 훅을 이용하여 다양하게 사용할 수 있다.

import { useRouter } from 'next/router';
const router = useRouter();
const { slug } = router.query;
// 여기서 slug는 지정해준 파일이름이 된다

▶️ query가 있는경우?🤔

ex) category/food?from=event

import { useRouter } from 'next/router';
const router = useRouter();
const { slug, from } = router.query;

// slug=food
// from = event

▶️ query에 'slug'가 있는경우?🤔

pages 안의 [slug]가 우선시 된다.
ex) category/food?slug=event

import { useRouter } from 'next/router';
const router = useRouter();
const { slug } = router.query;
// slug=food (o)
// slug=event (x)

▶️ 다중 slug의 경우?🤔

1. [slug]

ex) 파일구조 => pages/[username]/[info].js

import { useRouter } from 'next/router';
const router = useRouter();
const { username, info } = router.query;

2. [...slug]

ex) 파일구조 => pages/cart/[...slug].js

import { useRouter } from 'next/router';
const router = useRouter();
const { slug } = router.query;
// slug는 배열로 반환

---

✅ 페이지간의 이동

1. Link

<Link href='url'>url로가기</Link>

2. router.push

router.push('url'); // 이벤트리스너로 추가

---

✅ Shallow Routing

getServerSideProps / getStaticProps등을 다시 실행시키지 않고, 현재 상태를 잃지 않은 상태로 url을 바꾸는법

[동일한페이지에서 query만 바뀌는 경우만 해당]

상황
사용자가 어떤 동작을 했고, 그 기록을 query로 남기고 싶을때
(query로 남기면 사용자가 새로고침을 해도 유지되는 장점이 있음.)
❌ url이 바뀌었다고 페이지가 처음부터 다시 렌더링 되거나, Data fetching이 다시 일어나는것은 비효율❌

✔️ url 을 바꾸는 3가지 방식

• location.replace('url')
  : 로컬 state가 유지되지 않음(리렌더)
• router.push(url)
  : 로컬 state는 유지 / data fetching 일어남
• router.push(url,as,{shallow:true})
  : 로컬 state는 유지 / data fetching 일어나지 않음