Next.js Page와 Routes

Next.js에서의 page란?

pages 폴더 안에 있는 react component를 의미.

 

// pages/about.js (1)
export default function About() {
	return <div>About Page</div>
}

// pages/about/index.js (2)
export default function About() {
	return <div>About Page</div>
}

위 두가지 방법 모두 라우팅을 이용한 페이지를 만들 수 있다.

---

페이지 이동

 

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">Home</Link>
      </li>
      <li>
        <Link href="/about">About Us</Link>
      </li>
      <li>
        <Link href="/blog/hello-world">Blog Post</Link>
      </li>
    </ul>
  )
}

export default Home

 

next/link를 이용한 페이지 이동이다.

기본적이고 간단한 방법이다.

 

// pages/post/[id]

import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { id } = router.query

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

export default Post

Dynamic Routes를 이용한  페이지 이동이다.

Post 페이지 이동시 id값을 받아와 디테일 페이지 같은 id 값이 필요한 페이지를 만들 수 있다.

실제로 코드로 확인해보면 로컬 주소 뒤에 아무 숫자를 입력해도 id 값으로 인식해 페이지가 정상 랜더링 되는 것을 확인할 수 있다.