[Next.js] Slug

Next.js에서 동적 라우팅, 슬러그(Slug)의 사용

 

1. 슬러그 사용법

슬러그는 1. 슬러그:[slug], 2. 다중 슬러그 [...slug], 3. 옵셔널 슬러그 [[...slug]] 3가지 형태가 있다.
다중 슬러그와 옵셔널 슬러그에서 slug는 배열이므로 []안에 스프레드 연산자(...)을 이용하여 생성한다.
슬러그를 이해하기 위해 아래 예제를 보자

1. pages/post/create.js
2. pages/post/[pid].js
3. pages/post/[...slug].js

/가 pages라고 되어있을 때,
1의 pages/post/create.js는 /post/create 경로와 일치한다.
2의 pages/post/[pid].js는 /post/1, /post/abc, 기타등등과 경로가 일치하지만 /post/create의 경로와 일치하지 않는다.
3의 pages/post/[...slug].js는 /post/1/2, /post/a/b/c, 기타등등과 경로가 일치하지만 /post/create, /post/abc의 경로와 일치하지 않는다.
[[...slug]]는 [...slug]와 3.의 명시한 차이를 제외하면 동일하게 동작한다.

 

pages/post/[slug].js; // http://www.~~~~.com/post/:slug 와 같다. (ex: http://URL/post/a)
pages/post/[...slug].js; // http://www.~~~~.com/post/:slug/:slug/:slug...... 와 같다. (ex: http://URL/post/a/b/c/d/...)

정적으로 만들어져 있는 페이지를 제외한 페이지로 둘 다 Wild Card 처럼 아무 페이지나 동적으로 이동 가능하다.

 

2. 슬러그의 사용

1. 슬러그:[slug] 사용

/pages/abc/[slug].js

위와 같은 폴더 구조에서 아래와 같이 실행한다.

import { useRouter } from "next/router";

const ExampleSlug = () => {
  const router = useRouter();
  const { slug } = router.query;

  return <h1>This Page is {slug}</h1>;
};

export default ExampleSlug;

- url/abc/[slug]와 같은 주소로 [slug]에 어떤 값을 넣더라도 해당 url로 바뀌며 This Page is "slug에 입력한 값"이 출력된다.
- 어떤 값도 가능하지만 위에 설명한 것처럼 이미 존재하는 정적페이지는 제외되어야 한다.

2. 다중 슬러그 [...slug], 3. 옵셔널 슬러그 [[...slug]] 사용
/pages/[slug1]/[slug2].js

위와 같은 폴더 구조에서 아래와 같이 실행한다.

import { useRouter } from "next/router";

const ExampleSlug2 = () => {
  const router = useRouter();
  const { slug1, slug2 } = router.query;

  return (
    <h1>
      This Page is {slug1} and {slug2}
    </h1>
  );
};

export default ExampleSlug2;

 

- url/[slug1]/[slug2]와 같은 url로 바뀌며 This Page is "slug1에 입력한 값" and "slug2에 입력한 값"이 출력된다.
- 어떤 값도 가능하지만 위에 설명한 것처럼 이미 존재하는 정적페이지는 제외되어야 한다.

 

3. [...slug] vs [[...slug]]

[...slug] vs [[...slug]] 는 index.js 파일이 있어야 하느냐 없어도 되느냐의 차이

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

[[...slug]]는 index.js가 없어도 해당 url로 접근 가능하다.

but [...slug]는 404 Error가 발생한다.

 

 

4. Shallow Routing

- Next.js 에서 페이지를 그릴 때는 pre-render를 우선적으로 고려한다.

pre-render란

- getServerSideProps / getStaticProps 등을 다시 실행시키지 않고, 현재 상태를 잃지 않고 url 을 바꾸는 방법이다.
- 예를 들어, 상태는 유지하면서 url 만 바꾸고 싶은 경우 사용자가 어떤 동작을 하여 그 기록을 남기고 싶을 때 query로 남기면 사용자가 새로고침을 해도 유지된다.

 

url 을 바꾸는 3가지 방식

- `location.replace('url')` : 로컬 state가 유지되지 않는다. (re-rendering 발생)
- `router.push(url)` : 로컬 state가 유지되지만 data fetching 은 일어난다.
- `router.push(url, as, { shallow : true })` : 로컬 state가 유지되고 data fetching도 일어나지 않는다.

 

참고: 

https://nextjs.org/docs/routing/dynamic-routes

Routing: Dynamic Routes | Next.js