Dynamic Routes, link

동적 라우팅

Next.js의 기능 중에서 가장 강력한 기능 중 하나인 동적 라우팅이다.

동적 라우팅은 말 그대로 정적으로 라우팅 페이지를 각각 만드는 것이 아닌 동적으로 페이지를 자동으로 생성하고 연결한다.

[id].js 파일을 생성하면 자동으로 해당 아이디의 값을 이름으로 가지는 JS 파일로 들어오는 동적인 경로를 가지게 된다.

[id].js

import { useRouter } from 'next/router'
/* 
다이나믹 라우팅으로 만약 클릭을 하게 되면 해당 id에 대한 페이지로 들어오게 됨.
 
*/
const Post = () => {
  const router = useRouter()
  const { id } = router.query

  return <p>Post: {id}</p>
}

export default Post

Link

Next.js 에서는 pages/about.js 에
다음과 같은 내용을 추가하여 "About"페이지를 생성할 수 있다.

export default function About() {
  return (
  	<div>
      <p>This is the about Page<p/>
    </div>
  )

페이지들을 연결해야 하는데, 지금까지 <a>를 사용해왔다.
그러나 클라이언트 사이드에서의 이동을 실행하지 않고,

대신 브라우저가 다음 페이지에 대한 서버에 요청을 보내고,
우리가 원하지 않는 페이지를 새로 고침하게 된다는 번거로움이 있다.

클라이언트 사이드에서의 이동을 지원하기 위해, Next.js 에서는
next/link를 통해 제공되는 Link 컴포넌트를 사용할 수 있다.

Link 컴포넌트를 사용하면, 페이지 이동이 페이지의
새로고침 없이 발생할 수 있다.

• 예시

다음 코드를 pages.index.js에 추가한다.

import Link from 'next/link'

const Index = () => (
	<div>
    	<Link href="/about">
          <a>About Page</a>
    	</Link>
    <p>Hello Next.js</p>
    </div>
  );

export default Index;