Next js 튜토리얼 5편 : 동적 라우팅

목차

Next js 튜토리얼 1편: 시작하기

Next js 튜토리얼 2편 : 페이지 이동 

Next js 튜토리얼 3편 : 공통 컴포넌트 사용

Next js 튜토리얼 4편 : 동적 페이지  

Next js 튜토리얼 5편 : 동적 라우팅  - 현재 글

Next js 튜토리얼 6편 : 데이터 가져오기  

Next js 튜토리얼 7편 : 컴포넌트 스타일링  

Next js 튜토리얼 8편 : 배포

Clean URLs with Dynamic Routing

이전 장에서 query string을 사용하여 동적 페이지를 만드는 방법에 대해서 배웠습니다. 이를 통해 링크를 눌러 이동하면 아래와 같이 나옵니다.

http : // localhost : 3000 / post? title = Hello % 20Next.js

이번 장에서는 http : // localhost : 3000 / p / hello-nextjs 와 같이 깨끗한 URL을 설정하는 방법에 대해 학습합니다

시작하기 전에 Next.js 9버전 이상을 사용하고 있는지 확인하세요

Setting

아래의 예제 앱을 다운로드 후 실행 해 주세요

git clone https://github.com/zeit/next-learn-demo.git

cd next-learn-demo

cd 4-clean-urls

npm install

npm run dev

Dynamic Routing

Next.js의 기능 중 동적 라우팅을 사용하여 '/pages'의 동적인 경로를 처리 할 수 있습니다.

'pages/p/[id].js' 페이지를 생성하여 동적인 경로를 만듭니다. '/p'폴더는 '/pages'폴더 안에 있어야만 [id].js를 사용할 수 있습니다.

[id].js 파일에 아래의 코드를 작성해 주세요

import { useRouter } from 'next/router';

import Layout from '../../components/MyLayout';

export default function Post() {

  const router = useRouter();

  return (

    <Layout>

      <h1>{router.query.id}</h1>

      <p>This is the blog post content.</p>

    </Layout>

  );

}

이 페이지는 '/about'과 같은 정적인 경로를 처리하는 대신에 '/p/'다음에 오는 경로를 처리합니다. 예를 들면 '/p/hello-nextjs'는 이 페이지에서 처리하게 됩니다. '/p/post-1/another'는 처리하지 않습니다

페이지의 파일 이름에 대괄호('[]')가 있으면 동적인 경로가 됩니다. 현재는 페이지의 전체 이름만 동적으로 만들 수 있습니다. 페이지 이름 중 일부만 동적으로 변경할 수 없습니다. 예를 들면 '/pages/p/[id].js'는 지원하지만 '/pages/p/post-[id].js'는 지원하지 않습니다

---

이제 동적 경로를 사용 할 수 있게 여러 링크를 추가 합시다. 'pages/index.js'에 아래의 코드를 작성해 주세요

import Layout from '../components/MyLayout'

import Link from 'next/link'

const PostLink = props => (

  <li>

    <Link href="/p/[id]" as={`/p/${props.id}`}>

      <a>{props.id}</a>

    </Link>

  </li>

)

export default function Blog() {

  return (

    <Layout>

      <h1>My Blog</h1>

      <ul>

        <PostLink id="hello-nextjs" />

        <PostLink id="learn-nextjs" />

        <PostLink id="deploy-nextjs" />

      </ul>

    </Layout>

  )

}

PostLink 컴포넌트를 살펴 봅시다

const PostLink = props => (

  <li>

    <Link href="/p/[id]" as={`/p/${props.id}`}>

      <a>{props.id}</a>

    </Link>

  </li>

)

Link 컴포넌트의 href는 페이지의 경로입니다. as는 브라우저 URL에 보여질 URL입니다.

History Awareness

첫 번째 링크를 클릭하여 이동 후 브라우저의 뒤로가기와 앞으로 가기를 눌러도 정상적으로 히스토리 관리가 되는 것을 확인 할 수 있습니다

동적인 url을 사용하고 싶다면 'as' props를 추가 하면 됩니다. 'as' props가 없으면 동적 경로가 작동하지 않으니 주의하세요

Finally

동적 라우팅에 대해 더 알고 싶다면 dynamic-routing example 에서 예제를 확인 하거나 Next.js의 documentation 를 확인하세요

다음 장에서는 데이터를 가지고 오는 방법에 대해서 알아 봅시다

---

Next js 튜토리얼 1편: 시작하기

Next js 튜토리얼 2편 : 페이지 이동 

Next js 튜토리얼 3편 : 공통 컴포넌트 사용

Next js 튜토리얼 4편 : 동적 페이지  

Next js 튜토리얼 5편 : 동적 라우팅  - 현재 글

Next js 튜토리얼 6편 : 데이터 가져오기  

Next js 튜토리얼 7편 : 컴포넌트 스타일링  

Next js 튜토리얼 8편 : 배포