티스토리 뷰

Nextjs

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

Aairon 2019. 10. 1. 14:28
반응형

목차

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

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

Next js 튜토리얼 8편 : 배포


Clean URLs with Dynamic Routing

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

이번 장에서는 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 튜토리얼 5편 : 동적 라우팅  - 현재 글

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

Next js 튜토리얼 8편 : 배포

반응형
저작자표시

'Nextjs' 카테고리의 다른 글

Next js 튜토리얼 7편 : 컴포넌트 스타일링  (0) 2019.10.05
Next js 튜토리얼 6편 : 데이터 가져오기  (0) 2019.10.01
Next js 튜토리얼 4편 : 동적 페이지  (1) 2019.09.30
Next js 튜토리얼 3편 : 공통 컴포넌트 사용  (0) 2019.09.30
Next js 튜토리얼 2편 : 페이지 이동  (3) 2019.09.30
댓글