------------------------------------------------------------------/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}); }
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;