NextJS: Routing intro

Routing 소개

Next.js는 페이지(Page) 개념에 기반한 파일 시스템 기반의 라우터를 내장하고 있습니다.

• pages 디렉토리에 파일이 추가되면, 자동으로 해당 파일이 라우팅 경로로 사용됩니다.

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

  동적 라우트에 대해 더 알아보려면 동적 라우트 문서를 참조하세요.(https://nextjs.org/docs/routing/dynamic-routes)

페이지 간 링크

Next.js 라우터를 사용하여, 싱글 페이지 애플리케이션과 유사한 방식으로 페이지 간 클라이언트 측 라우트 전환이 가능합니다.

이를 위해 Link라는 React 컴포넌트가 제공됩니다.

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

위 예제는 여러 개의 링크를 사용합니다. 각 링크는 경로(href)를 이미 알고 있는 페이지로 매핑합니다.

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

기본적으로 정적 생성을 사용하는 페이지에서 초기에나 스크롤을 통해 <Link />가 뷰포트 안에 있으면 해당 링크와 관련된 데이터가 미리 가져와져서 프리페치됩니다. 서버 렌더링된 경로에 해당하는 데이터는 <Link />가 클릭될 때만 가져옵니다.

동적 경로 연결

동적 경로 세그먼트를 위해 인터폴레이션을 사용하여 경로를 생성할 수도 있습니다. 예를 들어, 컴포넌트에 프롭으로 전달된 포스트 목록을 보여주려면:

import Link from 'next/link'

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

export default Posts

encodeURIComponent는 경로를 utf-8 호환성을 유지하기 위해 사용됩니다.

또는 URL 객체를 사용할 수도 있습니다:

import Link from 'next/link'

function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link
            href={{
              pathname: '/blog/[slug]',
              query: { slug: post.slug },
            }}
          >
            {post.title}
          </Link>
        </li>
      ))}
    </ul>
  )
}

export default Posts

이제 인터폴레이션을 사용하여 경로를 생성하는 대신 href에서 URL 객체를 사용합니다. 여기서:

pathname은 pages 디렉토리에서 페이지의 이름입니다. 이 경우에는 /blog/[slug]입니다.
query는 동적 세그먼트를 포함하는 객체입니다. 이 경우에는 slug입니다.

라우터 주입

예제: Dynamic Routing(https://github.com/vercel/next.js/tree/canary/examples/dynamic-routing)

React 컴포넌트에서 라우터 객체에 접근하려면 useRouter 또는 withRouter를 사용할 수 있습니다. 일반적으로 useRouter를 사용하는 것이 좋습니다.

명령형으로

예제: Using Router
next/link는 대부분의 라우팅 요구 사항을 처리할 수 있지만, next/router 문서를 살펴보면 next/link 없이 클라이언트 측 네비게이션을 수행할 수 있습니다.

다음 예제는 useRouter를 사용하여 기본 페이지 탐색을 수행하는 방법을 보여줍니다.

import { useRouter } from 'next/router'

export default function ReadMore() {
  const router = useRouter()

  return (
    <button onClick={() => router.push('/about')}>
      Click here to read more
    </button>
  )
}