다이나믹 라우터

next에서 다이나믹 라우팅을 구현하기는 매우 쉽습니다.
예를 들어 "/photo/1"과 "/photo/34"등 이처럼 photo뒤의 숫자를 변경하여 원하는 사진을 가져오는 api인 경우 일일이 숫자가 다른 api를 만드는 것은 매우 힘듭니다.

리액트에서는 "/photo/:id"이처럼 뒤에 :을 붙여 컴포넌트에서 쿼리로 받아왔지만 넥스트에서는 파일명 또는 폴더명을 [id].js로 만듭니다.

function photo(){//[id].js
	const router = useRouter();
    const {id} = router.query;
  
  	return (
    	<div>이사진의 숫자는{id}입니다.</div>
    )
}

즉 저 컴포넌트에 api를 보내고 싶으면 'pages/photo/[id].js' 이경로에 컴포넌트를 만들면 됩니다.(useRouter는 next에 기본으로 내장이 되있습니다.)

링크

리액트에서 라우터를 구현하려면 여러가지 컴포넌트를 임포트를 해야했습니다. 하지만 지난 포스팅에서 말한것처럼 모든 페이지는 _app.js를 통하고 여기서 라우팅을 하기위해선 Link라는 컴포넌트를 사용해야합니다. 사용법은 리액트와 비슷합니다.

import Link from "next/link";

function photo(){//[id].js
	const router = useRouter();
    const {id} = router.query;
  
  	return (
    	<div>
        이사진의 숫자는{id}입니다.
          <Link href="/">
            <a>this page!</a>
          </Link>
      	</div>
    )
}

특이한점은 Link컴포넌트 안에 a태그를 넣어주는 것이 다른 점입니다. 여기서 주의할 점은

• Next.js 앱 외부의 페이지로 링크를 걸 때는, Link없이 a태그만을 사용한다.
• className과 같은 속성을 추가할 때는 Link태그에 추가하지 않고 a태그에 추가해야 한다.

prefetch

next의 Link 컴포넌트의 장점은 prefetch기능입니다. prefetch란 다음 경로를 미리 예측하여 다음 경로에 있는 컴포넌트를 미리 랜더링하는것입니다. 만약 컴포넌트가 화면에 보이면 그 컴포넌트의 경로를 뒤에서 미리 랜더링을 한다는 의미입니다. 정적생성을 사용하는 페이지는 더 빠른 페이지 전환을 위해 데이터가 포함된 JSON파일을 미리 로드합니다.

이것 외에도 Link태그의 props는 다음과 같습니다.

• href : 이동할 경로 혹은 URL, 필수입니다
• as : 브라우저 URL 표시 줄에 표시 될 경로에 대한 선택적 데코레이터. Next.js 9.5.3 이전에는 동적 경로에 사용되었으므로 이전 문서 에서 작동 방식을 확인하길 바란다.
• passHref : href property를 Link 자식에게 강제로 전달하게 한다. 기본값은 false.
• prefetch - 아까 배운것, 기본값은 true, prefetch={false}를 통해 프리페치를 비활성화할 수 있다.
• replace : history 스택(방문 기록)에 새 url을 추가하는 대신 현재 상태를 변경한다. 기본값은 false
• scroll : 페이지 전환 후 페이지 상단으로 스크롤할지 여부. 기본값은 true.
• shallow : getStaticProps, getServerSideProps, getInitialProps을 다시 실행하지 않고 현재 경로를 업데이트. 기본값은 false.