파일 기반 라우팅(1)

1. 파일기반 라우팅이란

• react-router-dom 없이 폴더 구조로부터 Next.js가 프로젝트의 route를 도출해내도록 해줌
• "pages"라는 폴더를 생성하고, 그 안에 js파일들을 생성하면 자동으로 라우팅됨
• index.js는 항상 지정된 폴더의 루트 페이지임
• 동적라우팅은 폴더나 파일명에 []를 사용

2. 파일기반 라우팅 폴더 구조

예시로 이처럼 폴더 구조가 이루어져 있다면 라우팅은

index.js => http://localhost:3000
about.js => http://localhost:3000/about
portfolio/index.js => http://localhost:3000/portfolio
portfolio/[id].js => http://localhost:3000/portfolio/1
portfolio/list.js => http://localhost:3000/portfolio/list
clients/index.js => http://localhost:3000/clients
clients/[id]/index.js => http://localhost:3000/clients/1
clients/[id]/[clientid].js => http://localhost:3000/clients/1/2

으로 세팅된다.

3. 동적 라우팅

• 부여받은 path값에 따라 동적으로 라우팅하는 것
• 화면 구조는 같고, 데이터가 다르게 구성될 때 사용됨

4. useRouter

• Next.js에서 함수 형식으로 라우팅 할 수 있게 해주는 Next.js 기본 라이브러리

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

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

  return (
    <div>
      <h1>PortfolioProjectPage{router.query.id}</h1>
    </div>
  );
}

export default PortfolioProjectPage;

코드에서 console.log를 보면

router.pathname을 통해 경로를,
router.query를 통해 동적 라우팅 시 동적 경로값을 가져올 수 있다.

// clients/[id]/[clientid].js
import { useRouter } from "next/router";

function SelectedClientProjectPage() {
  const router = useRouter();
  console.log(router.query);
  return (
    <div>
      <h1>SelectedClientProjectPage</h1>
    </div>
  );
}

export default SelectedClientProjectPage;

이처럼 폴더이름과 js파일 둘다 []를 사용하게 되면

router.query에서 id와 clientid 두가지를 같이 리턴해주는 것을 로그를 통해 확인할 수 있다.

5. Catch-All 라우터

• 지원해야 하는 url 형식이 다양한데, 동일한 컴포넌트로 한번에 처리할 때
  ex) 블로그 글들을 년도로 검색 / 년도+월로 검색
• javascript의 spread 연산자처럼 파일명에 [...이름].js으로 작성해줌

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

function BlogPostsPage() {
  const router = useRouter();
  console.log(router.query);
  return (
    <div>
      <h1>BlogPostsPage</h1>
    </div>
  );
}

export default BlogPostsPage;

http://localhost:3000/blog/2023/12/03 로 들어갔을 때,

slug가 배열형식인 것을 확인할 수 있다.