Next 3장 - 동적 경로

Next.js

폴더 구조

• pages
  • index.js => index.js는 특별한 파일로 경로를 읽지 않는다.

동적 경로 활용하기

• pages/[project].js 파일을 만들면 URL에서 pages에 어떠한 값이 들어와도 [project].js 파일을 인식한다.
• pages/someting, pages/null 등 모든 주소값을 [project].js로 인식하게 된다.
• 그렇기 때문에 동적 경로를 구분하여 사용해야 한다.
• 이는 파일 내에서 useRouter 훅으로 URL 값을 받아오고, 제공하는 함수인 .pathname, .query를 사용하여 URL의 경로를 가져올 수 있다.

import { useRouter } from "next/router";

function PortfolioProjectPage() {
  const router = useRouter();

  console.log(router.pathname);
  console.log(router.query);
  // pages/something 입력 시
  // console에는 http~pages/[project]
  // {project: "something"} 이 출력된다.

  return <div>example pages</div>;
}

중첩된 동적 라우팅 활용하기

• 동적 경로가 중첩된 경우가 존재한다.
• client 폴더에 index.js 파일을 생성하면 /client 경로에는 접근이 가능하지만 경로가 동적으로 바뀌는 경우에 대비할 수 없다.

• /client/something/1, /client/nothing/1 => something과 nothing모두 하나의 [example].js로 처리할 수 없기 떄문에, 이때 폴더자체를 동적 경로로 생성한다.

• client
  • [id]
    • [clientproject].js;

// [clientproject].js
import { useRouter } from "next/router";

function SeletedClientProject() {
  const router = useRouter();
  console.log(router.query);

  return <div>example text</div>;
}

• 이제 접근하는 /client/something/1에 대한 출력 값은 {id: "something", clientproject: "1"}의 객체 형태이다.