/pages 안에 api 폴더를 만들어 준다.
export default function handler(req,res){
res.status(200).json({name :'JImmy'});
}
export default function UserNameInfo() {
const router = useRouter()
const {username,info} = router.query
const [name,setName] = useState('?')
useEffect(()=>{
fetch('/api/user').then((res)=> res.json()).then((data) =>{
setName(data.name);
})
},[])
return (
<>
<h1 className="title"> {username}'s {info} Info</h1>
<h1 className="title"> Name : {name}'s</h1>
</>
)
}
src 폴더 안에 constants 라는 폴더를 생성해준다.
/src/constants 에 useDetail.js를 생성
export const userDetail = {
name : 'dorikoo',
age : 20,
height : '200cm',
weight : '100kg',
}
import {userDetail} from "constants/useDetail";
export default function handler(req,res){
res.status(200).json(userDetail);
}
export default function handler(req,res){
const {uid} = req.query
res.status(200).json({name:`dorikoo ${uid}`});
}
export default function UserNameInfo() {
const router = useRouter()
const {username,info, uid} = router.query
const [name,setName] = useState('?')
useEffect(()=>{
if(uid != null) {
fetch(`/api/user-info/${uid}`).then((res) => res.json()).then((data) => {
setName(data.name);
})
}
},[uid])
return (
<>
<h1 className="title"> {username}'s {info} Info</h1>
<h1 className="title"> Name : {name}'s</h1>
</>
)
}
req / res 관련 다양한 기능들은 Middleware들을 활용할 수 있다.
내장 Middlewares : req.cookies , req.query
const cookies = req.cookies
console.log(JSON.stringify(cookies))
res.status(500).send({error : ' error '});
res.status(404).send({error : ' error '});
res.redirect(307, '/api/user');