[Next.js]라우팅 2 _ API

API?
Application Programming Interface
컴퓨터나 컴퓨터 프로그램사이의 연결 (소통방법)

✨ FE에서는 BE에서 제공해주는 API를 통해 DB의 내용을 활용할 수 있다. ✨

---

✅ API 통신상태 확인

개발자도구 -> Network -> Fetch/XHR

---

✅ API Route

파일경로: pages/api/*로 설정

export default function handler(req, res) {
res.status(200).json({name:"Erin"});
}

API의 다중 Route? ---- 가능⭕️

• /api/파일이름/파일.js
• /api/파일이름/[slug].js
• /api/파일이름/[...slug].js

export default function handler(req, res) {
const { uid } = req.query;
res.status(200).json({ name: `Erin ${uid}` });
}

---

✅ Client 사이드에서의 Data Fetching

단일 라우팅의 경우

  useEffect(() => {
  fetch('/api/*')  // * 은 설정한 파일이름
    .then((res) => res.json())
    .then((data) => {처리});
}, []);

다중 라우팅의 경우

// slug === 'uid'로 지정되어 있는 상태
 useEffect(() => {
  uid &&                          // slug 가 있을경우에만 
    fetch(`/api/user-info/${uid}`)
      .then((res) => res.json())
      .then((data) => {처리});
}, [uid]);

---

✅ API Middlewares

단순히 요청/응답만 받는 것 외에도, 미들웨어를 활용하여 좀더 확장된 기능을 사용할 수도 있다.

req.cookies / req.query 등, req/res 관련 다양한 기능들을 미들웨어를 활용할 수 있다.

---

✅ API 응답(res)

• res.status(code) : 코드에 따른 응답을 줄 수 있다.
• res.json(body) : serializable object
• res.redirect(code,url) : 코드와 다시접근할 url(api주소)을 설정할 수 있다.
• res.send(body):string/object/Buffer