Next.js file System 기반의 라우팅

Next.js에는 페이지 개념을 기반으로 구축된 파일 시스템 기반 라우터가 있다.
파일이 페이지 디렉토리에 추가되면 자동으로 경로를 추가할 수 있다.
페이지 디렉토리 내의 파일은 가장 일반적인 패턴을 정의하는 데 사용한다.

파일 생성 예시

pages/index.js -> /
pages/blog/index.js -> /blog

pages/blog/first-post.js -> /blog/first-post
pages/dashboard/seetings/username.js -> /dashboard/settings/username

pages/blogs/[slug].js -> /blog/:slug

실제 사용

 {allPostData.map(({ id, title, date }) => (
 	<li className={homeStyles.listItem} key={id}>
      <Link href={`/posts/${id}`}>
          <p>{title}</p>
      </Link>
      <br />
      <small className={homeStyles.lightText}>{date}</small>
  	</li>
))}

title을 클릭했을 때 Link로 페이지 이동을 처리하기 위해서 href 속성을 추가했다.

파일 구조

그리고 page 디렉토리 안에 posts 디렉토리를 추가하고 그 안에 [id].tsx 파일을 만들어서 경로를 생성한다.

결과 화면

제목을 누르면 파일 시스템 기반으로 라우팅 성공 !