next.js 로 엔드포인트 만들기;

next.js 로 엔드포인트 만들기;

pages폴더 안에 api폴더를 만들고 파일을 생성하면 api의 경로가 된다

-> http://localhost:3000/api/links 이런 식으로

 

const links=(req, res)=>{
  res.send('Hello, api') // res.send는 응답을 보내는 메서드
} 

export default links

links 파일에 api를 요청하는 코드를 넣고 주소로 들어가면 

이렇게 나온다.

---

다이나믹 라우팅도 활용 가능

-> http://localhost:3000/api/short-links/(아무거나 넣기)

 [id.js] 파일에 코드를 적음 

const handler=(req, res)=>{
  res.send('hello next') // res.send는 응답을 보내는 메서드
} 

export default handler

//다이나믹 라우팅을 이용해서 엔드포인트를 만들었다.

---

1. api 의 첫번재 파라미터 req (request)

• request에 대한 정보를 가져올 때 사용
• params값과 query 사용 가능 

const handler=(req, res)=>{
  res.send(req.query) // res.send는 응답을 보내는 메서드
} 

export default handler


GET http://localhost:3000/api/short-links/1234?q=const

• request의 query값을 확인하면 값을 볼 수 있다.

• 객체의 id 프로퍼티로는 123 , 쿼리는 const  들어가있음  / 같은 객체에 담겨있다. 

---

• 메소드를 다룰때는 switch를 사용할 수도 잇다.

const handler=(req, res)=>{
  switch(req.method){
    case 'GET':
      res.send('GET request')
      break
    case 'POST':
      res.send('POST request')
      break
    default:
      res.status(405).end() 
  }
} 

export default handler

이런식으로 메소드 값에 따라서 다르게 처리 가능

 

2. response 사용법

• 함수를 메소드 체이닝 방식으로 사용

const handler=(req, res)=>{
  switch(req.method){
    case 'POST':
      res.status(201).send({
        title:'next.js',
        url:'https://nextjs.org'
      });
      break;
      
    case 'GET':
      res.send([
        {
        id:'1',
        title:'google',
        url:'https://google.com'
      },
      {
        id:'2',
        title:'naver',
        url:'https://naver.com'
      },
      {
        id:'3',
        title:'daum',
        url:'https://daum.net'
      }
      ]);
      break;
      default:
        res.status(404).end()
      
  }
} 

export default handler

//GET메소드로 요청이 오면 201 상태코드로 주소 목록을 보내줌
//POST메소드로 요청이 오면 새로운 주소를 추가함

 

- 메소드 체이닝은 메소드를 연속적으로 호출하는 것을 말한다.
-> res.status(404).end() -> status(404)를 호출한 후 end()를 호출

- send메소드는 문자열이나 객체를 보낼 수 있는 메소드.
- 자바스크립트 객체를 아규먼트로 전달하면 ContentType 헤더도 알아서 보내줌.

---

• request 객체
  1. method : 문자열 타입 / 리퀘스트로 들어온 http 메소드 값
  2. query : 객체 타입 / 쿼리스트링이나 next.js에서 사용하는 params값이 들어있는 객체
  3. body : any 타입 / 리퀘스트의 바디 값
  4. cookie : 객체 타입 / 리퀘스트의 쿠키가 key/value 로 들어있는 객체
• response 객체
  1. status () : 함수 타입 / 리스폰스로 보낼 http 상태 코드를 지정
  2. send () : 함수 타입 / 리스폰스로 보낼 바디를 전달