[Next.js] 반복적인 정보 보여주는 페이지 만들기

해결하고 싶은 문제점

 

이전 게시글에서, Next.js에서는 pages 폴더 내부의 파일로 페이지를 관리한다고 했다.

하지만 이런 페이지들을 만들어야 할때는 어떻게 할까?

게시글 상세페이지
유저 프로필 페이지

 

위의 경우에, 하나씩 페이지를 직접 만들게 되면, 너무 많은 페이지를 만들어야 한다.

Nest.js에서는 하나의 페이지를 공유하는 방식을 사용할 수 있고,

이를 사용해, 불필요한 반복작업을 줄일 수 있다.

 

해결방법

// 여러개의 게시글들 중에, 하나의 게시글 보여주기위한 페이지만들기
// pages/posts/[id].tsx

// uri 매개변수 받아오기 위한 모듈 불러오기
import { useRouter } from 'next/router'

const Post = () => {
  // useRouter 사용하여 라우팅 기능 사용하기
  const router = useRouter()
  
  // router.query로 uri 매개변수 id 받아오기
  return <div>{router.query.id}</div>
}

 

해결방식

주소창에 " 홈페이지주소 / posts / 게시글id " 를 입력하면,

Next.js가 해당 형식을 인식해 [id].tsx 파일을 실행시켜준다.

게시글id가 무한히 바뀐다하더라도, 형식은 변하지 않았기 때문에 [id].tsx 파일을 실행시킨다.