[Next.js] Dynamic Routes(페이지 이동)

오늘은 next.js의 주요 기능 중 하나라고 할 수 있는, 페이지의 구성과 이동(라우팅)에 대해 포스팅하려고 한다.

 

사실, React에서도 라우팅에 관한 서드파티를 지원한다.(React-Router-DOM) 이를 통해, 라우터 경로별로 컴포넌트를 그린다.

Next도 비슷한 원리로 라우팅을 지원할 것이며, React-Router와는 다른 차이점 혹은 장점이 있기에 사용되는 걸거라 예상된다.

 

사용법과 그 장점에 대해 한 번 학습해보겠다!

---

🤍 Pages & Dynamic Routes

Next.js 프레임워크의 사용규칙 중 하나는 바로, 페이지 컴포넌트들은 반드시 Pages 디렉토리에 담아야한다는 것이다.

그 이유는, 이 Pages 디렉토리 경로값이 곧 우리가 이동할 페이지 컴포넌트의 경로값이 되기 때문이다!

 

이같은 스트럭처를 가정한다. 그럼, 메인URL의 /about 라우팅을 하면 about.js 페이지 컴포넌트가 렌더링되는 것이다.

또한, /Info 라우팅이 Info 폴더를 바라보게 되며, 여기의 [id]는 동적 라우팅의 path parameter라고 생각하면 된다. (/info/:id)

/path의 모든 경우에 컴포넌트를 렌더링하고자 한다면, [...all].js 로 해당 디렉토리(path)에 페이지 컴포넌트를 만들면 된다. 

 

- Pre-rendering

Next.js는 기본적으로 모든 페이지를 pre-render한다고 소개된다.

이는, 페이지 단위로 필요한 최소한의 JS소스로 HTML이 선구축되며, 브라우저로부터 호출되면 이를 불러오는 것이다. (Hydration)

여기에서, 모든 파일을 한번에 불러오는 CSR에 비해 성능적 이점과 검색엔진 최적화의 장점이 생기는 것이다.

 

* Pre-rendering 2가지 모드 (HTML 생성시점 차이)

• Static Generation : HTML이 build 때 생성되며, 이는 매 request에 따라 활용/재활용된다. (추천)
• Server-side Rendering : HTML이 매 request마다 생성된다. 

 

- Link 태그

Next.js에도 동일하게 <Link> 태그가 존재한다. 페이지 컴포넌트 간의 라우팅을 지원하기 위한 커스텀된 <a>태그이다.

아래는, Next 강의에서 List-Wrapper 컴포넌트를 만든 코드로, <Link> 태그의 사용법을 주의깊게 보도록하자.

import React from 'react'
import Link from 'next/link'
import { Grid, Image } from 'semantic-ui-react'

const ItemList = ({ list }) => {
  return (
    <div>
      <Grid columns={3} divided>
        <Grid.Row>
          {list && list.map((item) => {
            const { id, image_link } = item;
            return (
              <Grid.Column>
                <Link href={`/detail/${id}`}><Image src={image_link} /></Link>
              </Grid.Column>
            )
          })}

        </Grid.Row>
      </Grid>
    </div>
  )
}

export default ItemList

1. Link 태그(모듈)를 'next/link' 로부터 가져온다.
2. React-Router의 <Link> 태그와 동일하게 사용하면 된다. 단, 경로는 to가 아닌, 기존 <a>태그와 동일한 href로 설정한다.

이는, 기본적으론 위에서 언급한 Static Generation의 SSR로, 해당 페이지에 필요한 번들 외에 서버 로드가 없다.

 

* URL Object 적용

다른 방법으로는, href에 아래와 같이 URL Object를 적용할 수 있다. (pathname, query 등)

<Link
  href={{
    pathname: '/blog/[slug]',
    query: { slug: post.slug },
  }}
>

 

- useRouter() 라우터 인식

동적 라우팅된 페이지의 라우터 정보를 가져오는 방법이다. 

// /detail/[id].js

import React from 'react';
import { useRouter } from 'next/router'

const DetailContainer = () => {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      Item Detail ID : {id}
    </div>
  )
}

export default DetailContainer

1. next/router 에서 useRouter 메서드를 가져온다. 이를, router 라는 변수에 담아준다.
2. router에는 각종 필드가 존재한다. 여기서, query 필드에 우리가 지정한 [params] 가 담겨있으며 이를 불러온다.

 

- useRouter() 동작명령

<span onClick={() => router.push('/about')}>

href 외에 라우팅을 하는 방법이다. history.push() 와 비슷한 형태이며, 이는 CSR(Client-Side Rendering)로 진행된다.

---

useRouter에 대한 포스팅이 완료되었지만, 사실 위 내용은 지극히 기본적인 부분이다.

query 외에 다양한 router 속성들도 존재하며, 옵션들을 지정해서 라우팅을 조정할 수 있다.

 

이 부분은, 추후에 라우팅에 대한 심층적인 내용을 다룰때 별도로 작성하도록 하겠다!

 

[출처]

- Next.js 공식문서 : https://nextjs.org/docs/routing/introduction

- 기억을 걷는 블로그(Next.js 핸드북) : https://coffeeandcakeandnewjeong.tistory.com/5?category=906459