Next.js | 라우터 | 소개

→라우팅

Next.js에는 페이지 개념을 기반으로 구축된 파일 시스템 기반의 라우터가 있다.

파일이 pages 디렉토리에 추가되면 자동으로 경로로 사용이 가능하다.

 

 

index 경로

라우터는 이름이 지정된 파일 'index'을 디렉터리의 루트로 자동 라우팅한다.

• 'pages/index.js' → '/'
• 'pages/blog/index.js' → '/blog'

 

중첩 경로

라우터는 중첩 파일을 지원한다. 

• 'pages/blog/first-post.js' → '/blog/first-post
• 'pages/dashboard/settings/username.js' → '/dashboard/settings/username'

 

동적 경로 세그먼트

동적 세그먼트를 일치시키기 위해 대괄호 구문을 사용할 수 있다.

• 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)

 

페이지 간 연결

Next.js 라우터를 사용하여 SPA와 유사하게 페이지 간에 클라이언트 측 경로 전환을 수행할 수 있다.

import Link from 'next/link'

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

export default Home

 

 

여러가지 링크가 있는 곳에서 href 는 알려진 페이지에 대한 경로를 매핑한다.

• / → pages/index.js
• /about → pages/about.js
• /blog/hello-world → pages/blog/[slug].js

 

동적 경로에 연결

${}를 이용하여 동적 경로를 매핑할 수 있다.

import Link from 'next/link'

function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link href={`/blog/${encodeURIComponent(post.slug)}`}>
            <a>{post.title}</a>
          </Link>
        </li>
      ))}
    </ul>
  )
}

export default Posts