[Next.js] - Routing Basics

• ✅ react-router-dom 라이브러리를 통해 했던 리액트 앱 라우팅이 Next.js 프레임워크에선 추가 설치 없이 작동이 가능하다.

• ❗️ 프레임워크임으로 정해진 규칙을 따르는 것은 필수!

Next Framework 라우팅 구조

---

• file based routing

• 예: pages/pageName.tsx -> localhost:3000/pageName

Nested Routing

---

• pages 경로 안에 새로운 경로 생성

• pages/rootPage

• 경로 안에 index.tsx || index.js :

• 즉 index 라는 파일명을 가진 파일은 경로 root의 바인딩

example :

• rootPage/index.tsx -> localhost:3000/rootPage

• rootPage/nested.tsx -> localhost:3000/rootPage/nested

Dynamic Routing

---

• 동일한 구조의 컴포넌트가 1개 이상일 때

• 즉 상위 경로에서 key 갑에 따른 조건부 렌더링을 할 때

• rootPage/[keyId].tsx -> localhost:3000/rootPage/{keyId}

• 💡 같은 경로의 동적라우팅이 아닌 컴포넌트가 있을 때 동일한 keyId 로 라우팅을 한다면 일반라우팅 컴포넌트가 우선적으로 실행된다.

Nested Dynamic Routing

---

• 동적 라우팅 안에 동적 라우팅

• rootPage/[keyId] 대괄호로 된 경로 생성 (❗️경로도 동적라우티잉 가능!)

• rootPage/[keyId]/test/[testId].tsx -> localhost:3000/rootPage/{keyId}/test/{testId}

Catch All Routes

---

• rootPage/[...params].tsx

• [...params] 이후의 모든 라우팅 경로 가 true

• ✅ react-router 에서 exact path 설정을 사용 안헀을 때랑 동일하게 작동

import { useRouter } from "next/router";

function Doc() {
  const router = useRouter();
  // current.location = rootPage/docs/[docsId]/a/b/c;
  const { params = [] } = router.query;
  // params = [ docsId, a, b]

  if (params.length === 2) {
    return (
      <h1>
        {params[0]}문서 : {params[1]}
      </h1>
    );
  }

  console.log(params);
  return <h1>Docs Home Page</h1>;
}

export default Doc;

• const { params = [] } = router.query; : 현 경로 이후의 모든 경로 값을 배열로 반환

• 경로의 길이의 상관없이 적용 가능

• 경로 길이에 따른 조건부 처리 가능

useRouter()

---

• react-router 의 useParams()와 비슷한 방식으로 uri template를 사용 가능

• [] 형식의 경로먄 가져올 수 있는것 같음

import { useRouter } from "next/router";

function test() {
  const router = useRouter();
  // current.location = rootPage/{keyId}/test/{testId}
  const { keyId, testId } = router.query;
  const { routes = [] } = router.query;

  return (
    <div>
      keyId : {keyId} testId : {testId}
    </div>
  );
}

export default test;