들어가기 앞서

Next.js에서 제공하는 내장 라우팅 시스템이 무엇이고 어떤방식으로 사용하는지를 중점으로 정리 하였습니다.

1. File-system based router

Next.js에서 기본 내장 되어 있는 라우팅 시스템은 File-system 기반으로 정적 파일을 생성하여 동작합니다.

Next.js에서는 pages 폴더 아래 파일들이 라우팅 경로로 사용 됩니다.

• Index routes

  pages폴더 안에 index.js는 → / 경로를 표현합니다. 그렇다면 /blog를 표현하고 싶다면 어떻게 해야 할까요?
  다음과 같이 pages/blog/index.js 표현 하면 됩니다.

• Nested routes

  중첩된 라우팅을 표현하고 싶다면 파일 구조를 중첩하여 사용하면 됩니다.

  • /blog/post.js → /blog/post
  • /blog/content.js → /blog/content
  • /blog/settings/username.js → /blog/settings/username

• Dynamic route segments

  블로그 포스트를 에로 포스트 번호가 1번 2번 3번이 있다고 가정한다면 각각 /blog/1post.js, /blog/2post.js, /blog/3_post.js 이런식으로 작성한다는 것은 매우 비효율적입니다. 따라서 동적으로 라우팅 페이지를 구성하고 싶은 경우 아래와 같은 양식으로 파일을 작성해야 합니다.

  • pages/blog/[slug].js → /blog/:slug (/blog/hello-world)
  • pages/[username]/settings.js → /:username/settings (/foo/settings)
  • pages/post/[…all].js → /post/* (/post/2020/id/title) # 여러개의 인자를 받고 싶은경우

2. Linking between pages

Next.js 에서 페이지 간에 이동을 위해서는 next/router , next/link 를 사용 할 수 있습니다.

2.1 next/link

Link를 사용하는 기본적인 예시 입니다.

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

2.2 next/router

Router를 사용하는 기본적인 예시 입니다.

import { useRouter } from 'next/router'

function ActiveLink({ children, href }) {
  const router = useRouter()
  const style = {
    marginRight: 10,
    color: router.asPath === href ? 'red' : 'black',
  }

  const handleClick = e => {
    e.preventDefault()
    router.push(href) // 페이지 이동
  }

  return (
    <a href={href} onClick={handleClick} style={style}>
      {children}
    </a>
  )
}

export default ActiveLink

2.3 어느 방식을 사용해야 하나요?

router.push를 사용해서 화면을 전환하는 경우는 javascript에서 window.location을 하는 경우와 비슷합니다.

Link를 사용해서 화면을 전환하는 경우는 <a> tag를 이용해서 화면을 전환 하는 경우와 비슷합니다. 다만 Next.js에서의 일반적인 <a> tag와는 다르게client-side 의 라우팅을 지원합니다.

여기서 확인되는 차이점은 <a> tag가 생성된다는 점 입니다.

즉 <a> tag 가 생성된다는 것은 SEO 최적화에 더 유리하다는 것을 의미합니다. (<a> tag에 링크를 크롤링 봇이 이동 할 수 있습니다.)

추가적으로 link는 data prefetch 기능을 제공하여 사용자의 화면에 link 태그가 보이게 되면 해당 링크에 연결된 페이지를 서버에 요청하여 prefetch 할 수 있습니다. 미리 가져온 페이지가 존재하기 때문에 이동시 더욱 빠르게 이동 할 수 있습니다.