[Next] Next.js에서의 동적라우팅

Next js에서의 동적 라우팅 방법

1. 받은 값을 2배로 리턴하는 api

------------------------------------------------------------------/pages/api/double.tsx
export default (req, res) => {
  const value = parseFloat( req.query.value )
  // 해당 주소로 받는 쿼리 value
  // http://localhost:3000/api/double?value=15 15의 값을 받는다.
  res.json({value : value * 2});
}

2. 받은 값을 2배로 출력하는 페이지를 생성

getInitialProps의 인자로 context를 받아서 context로 특정 인자 뒤의 값을 받아 사용한다.

------------------------------------------------------------------/pages/get-double/[value].tsx
import Link from "next/link";
import axios from 'axios';

function GetDouble(props) {
  return (
    <div>
      <div>
        {props.value}
      </div>
      <div>
        <Link href="/">
          <button>
            돌아가기
          </button>
        </Link>
      </div>
    </div>
  )
}

// query로 받은 value값을 받기 위하여 context를 인자로 받았다.
GetDouble.getInitialProps = async function (context) {
  // query로 받은 value값을 value에 할당   ex)/get-double/[value]
  const value = context.query.value;
  // value값을 1번에서 만든 api url에 query로 담아 요청
  const response = await axios.get('http://localhost:3000' + '/api/double?value=' + value)
    console.log(response)
  
  // 응답받은 값을 value에 담아 props.value로 return해준다.
  return {
    value: response.data.value
  }
}

export default GetDouble;