NextJs : 넥스트js의 라우팅 정리.

* 파일 기반 라우팅. 

기존 React : 코드 기반 라우팅 -> Next js : 파일 기반 라우팅

Nextjs에서는 코드 내 라우트 정의를 따로 사용할 필요가 없다.

폴더와 파일명을 통해서 라우팅을 정의한다.

 

index.js 파일이 폴더안의 페이지를 담당한다.

products 폴더 안의 index.ts 파일은 'domain.com/products' url을 의미한다.

 

동적 생성은 폴더 혹은 파일명에 대괄호  [ ]를 함으로 가능하다.

products 폴더안의 [id].ts 파일은 'domain.com/products/p1' or p2 or adfaf1 등의 url을 동적으로 연결시킨다.

 

 

* 동적 생성 추가내용.

클라이언트 사이드에서 동적 생성한 페이지의 파라미터값을 얻기위해 

useRouter를 사용한다.

 

import { useRouter } from ‘next/router’; // React상의 useParams / useLocation 의 역할.

const router = useRouter();
// 키가 담긴다. 


// portfolio폴더 안에 [projectId]라는 동적 경로 파일이 있다.

// domain.com/portfolio/something 에 접속했다면,

router.pathname // /portfolio/[projectId] 가 호출되고
router.query // {projectId : “something”} 가 담긴다.

 

router.query 를 통해 동적 세그먼트의 구체적인 값에 접근 할 수 있다.

 

 

* 중첩된 동적 경로일 경우.

 

- 그대로 router.query로 접근하기.

두가지 세그먼트가 다 나오게 된다. 

[id]폴더안의 [idproducts] 라면,

{ id : 'max' , idproducts : 'balloon' } 

 

- Catch all routes

파일명을 [...slug].ts 이렇게 작성한다.

파일명을 위처럼 작성하고 useRouter로 임포트 해오면 확보한 세그먼트 만큼 배열을 갖게 된다.

예를들어 

domain.com/2010/12 로 접속을 했다면

 

router.query의 값은 { slug : ['2010', '12'] } 

데이터가 담기게 된다.

 

데이터베이스에 요청을 보낼 때, 

예를 들어 2010년 12월에 올린 블로그의 내용을 필터링 해주세요 ! 와 같은 요청에 사용할 수 있다. 

 

 

++useRouter는 클라이언트사이드에서 파라미터 값을 얻어내는 방법이다. 서버사이드에서 파라미터값을 얻어내는 방법이 있다. 

getStaticProps함수와 getServerSideProps의 인자값으로 context를 지정하는 방법이다.

 

둘의 차이는 이렇다.

useRouter를 통해서 파라미터값을 받아내고 그 파라미터 값을 통해 컴포넌트 안에서 데이터를 페칭하는 것은,

브라우저에서만 이루어지게 된다.

 

하지만 

 

getStaticProps(context)의 context를 이용하여 페이지를 사전 렌더링 하게 되면 파라미터 값을 가져오는 로직이 서버사이드에서 실행되게 되는 것이다. 데이터 페칭 또한 파라미터값을 통해 서버사이드에서 실행할 수 있다.

 

그리고 getStaticProps 함수는 그 props를 받아서 쓰는 컴포넌트보다 먼저 실행된다. 

 

 

* Link 이용하기

import Link from 'next/Link'

link를 이용하면 http에 새로운 요청을 보내지 않고, 앱 상태가 바뀌지도 않는다. 

replace속성을 넣으면 새로운 페이지를 띄우지 않고 기존의 페이지를 변경한다. 단 뒤로가기가 되지 않는다. 

 

    {clientsInfo.map(({ id, name }) => {
          return (
            <li key={id}>
              <Link href={`/clients/${id}`}>{name}</Link>
            </li>
          );
        })}

 

*event를 통한 네비게이팅.

클릭시 페이지 이동이라면, onClick 후 링크로 이동할 수 있지만

router.push를 사용한다.

 

router.push('clients/max/projectA')


router.replace를 쓰면 현재 페이지를 대체한다. (뒤로가기 x)

 

 

* Router.push() 와 link. 어떤걸 써야 되나.

router.push()는 a태그를 만들지 않기 때문에 크롤링 되지 않아 SEO에 불리하다.

SEO에 상관없는 페이지라면 router.push(), SEO가 상관있다면 link.