파일 기반 라우팅 (Feat. Page Router)

🌀 파일 기반 라우팅

• 페이지 기반의 라우터, 폴더 구조를 통해 알아서 추론해서 라우팅함

pages(폴더)
┗_app.js => 내가 만든 모든 페이지가 초기화될 때 로딩되는 파일
┗ index.js => 루트 페이지 ( / )
┗ about.js => /about
┗ products(폴더)
    ┗ index.js => /products
    ┗ [id].js => /products/id (동적 라우팅, 대괄호 사용)

 

• 위에서 about.js는 정적 라우트 파일을 추가한 것이고, pages폴더 안에 products라는 폴더를 추가하면 그 안에 또 index.js파일을 생성할 수 있는데, 이게 products의 상위 페이지가 되고 그 아래로 다른 페이지들을 더 만들 수 있음
• 즉, pages폴더안에 about.js 파일을 만드는 것과 pages 폴더 안에 about폴더를 만들고 index.js파일을 만드는 것은 방법만 다를 뿐 결과는 같아서 본인이 선호하는 방식을 사용하면 됨.  하지만 중첩된 페이지  /products/id 같은 경우에는 폴더를 만드는 방식을 선택해야 함

 

🌀 동적 라우팅

✏️  동적 라우팅???

• 여러 종류의 데이터를 불러와야 하는 페이지를 생성할 때 사용
• 폴더 아래 대괄호([])를 사용해서 js파일을 만들면 별도의 설정 없이 동적 라우팅이 가능해진다.
• products 폴더안에 [id]. js 파일이 있으면 /products/1, /products/2, /products/3, 이렇게 동적으로 페이지가 생성되는데, 대괄호 사이에는 가급적이면 중복 없는 값을 적어주는 것이 좋음
• next는 이미 정의된 정적 라우팅 페이지 파일을 우선하기 때문에 정적 파일과 중복되면 정적 파일이 나옴.

 

➡️ portfolio파일 안에 동적 라우팅이 있고, 어떤 설정을 안해놓았기때문에 다 똑같은 페이지가 나온다.

 

✏️  useRouter

• 사용자가 URL에 입력한 구체적인 값에 접근하기 위해서 사용
•  next가 기본으로 제공해주는 라이브러리의 하위 패키지인 라우터에서 가져옴
•  router의 메서드
  • pathname : 경로를 알려줌
  • querty: 동적 라우팅 시 동적 경로값 알려줌, 인코딩 된 구체적인 값에 접근 가능

export default function PortfolioProjectPage() {
  const router = useRouter()
  //라우터 객체 반환
  console.log(router.pathname)
  console.log(router.query)

  return (
    <div>
      <h1>The Portfolio Project Page</h1>
    </div>
  )
}

• pathname은 파일경로를 반환하고
• query는 구체적 값을 반환

✏️  Catch-All 라우팅

• 모든 경로를 한번에 갖고 오는 라우트 기능, 어떤 경로를 가지고 있던 다 가지고 옴
• 스프레드 연산자를 사용해서 폴더 이름을 작성. [... posts]. js
• 가져온 값은 데이터베이스로 보낼 때나 게시물을 필터링할 때 사용할 수 있음

import { useRouter } from "next/router"

export default function BlogPostsPage() {
  const router = useRouter()
  console.log(router.query)
  return (
    <div>
      <h1>블로그 포스트</h1>
    </div>
  )
}