[Next.js] API Route에 대해 ( NextApiRequest ,NextApiResponse )

API Route 란?

• 등장배경
  • React 애플리케이션을 개발하다보면 backend API가 필요한 시점이 온다
  • (Eg.) DB의 데이터 조회| 사용자가 요청하는 데이터 처리 작업(html page가 아닌 입력받은 데이터만 필요)
  • 이를 위해 노드.js 을 활용한 custom server 파이프라인을 구축해서 작업하는 방식이 있다.
  • 하지만 이럴 경우 Next.js의 성능 최적화를 해침 (+TS 및 Es6 방식의 모듈 시스템 사용 못함)
  • 이를 위해 API Routes 라는 기능을 추가해서 Next.js 안에서 필요한 serverless API Endpoint를 구축 가능해짐
• API란?
  • 여러 종류가 있지만 REST API가 대표적임
  • REST API란 REST 규칙의 특수한 규칙을 가진 웹 API를 말한다. (참고: fomaios.tistory.com )
• API Routes를 활용한 REST API 예시
  
  • API Routes는 Next.js에서의 pages폴더 내 api 디렉터리를 만든 후 그 안에 정의하며 파일 시스템을 기반으로 주소가 결정됨 (URL 은 domain/api/이름 형태로 작성됨 ) 
  • Next.js는 노드.js 의 res, req를 직접 접근하지 않고 NextApiRequest 같이 래핑된 객체를 손쉽게 접근하는 인터페이스 제공 
  • API Routes를 사용하기 위해서 함수를 하나 작성하는데(handler) 이를 통해 req,res를 받음
    1. Next.js는 request를 해당 URL에 보내기 위해 이 함수를 실행함
    2. 이 함수에서는 html 코드가 아닌 서버사이트에서 진행할 작업만 작성하면 됨

const handler = (res: NextApiResponse, req: NextApiRequest) => {
    res.status(200).json({message:"Success"})
};

• 받아온 res 인자로 여러 메소드 사용 가능 ( eg. status를 통한 상태 코드 ) 
• 또한 여러개의 메소드를 체이닝해서 사용 가능( eg. status 다음에 오는 json은 api로 넘어오는 데이터를 json포맥으로 변형

 

• 댓글을 조회하는 API 예시

const comments = [
    {id:1, text: "comments 1"},
    {id:2, text: "comments 2"},
    {id:3, text: "comments 3"},
]

export default function handle(req,res){
    res.status(200).json(comments)
}

//   pages/api/comments

 

export default function Comments(){
    const fetchCommets = async()=>{
        const res = await fetch('/api/commnents')
        if(res.ok){
            const comments = await res.json()
        }
    }
}

//Comments.tsx

 

API Routes 유의 사항

• API Routes는 serverless function 이기 때문에 stateless 하여 지속적인 DB 커넥션을 유지하거나 web socket 등을 이용한 실시간 통신등의 live connection 환경에서는 부적합할수 있음
• getServerSideProps | getStaticProps 등에서 API Routes를 사용하면 API를 두번 호출할 수 있음.

API Routes Response Helpers

• res.status(code) - A function to set the status code. code must be a valid HTTP status code
• res.json(body) - Sends a JSON response. body must be a serializable object
• res.send(body) - Sends the HTTP response. body can be a string, an object or a Buffer
• res.redirect([status,] path) - Redirects to a specified path or URL. status must be a valid HTTP status code. If not specified, status defaults to "307" "Temporary redirect".
• res.revalidate(urlPath) - Revalidate a page on demand using getStaticProps. urlPath must be a string.

Request Helpers

• req.cookies - An object containing the cookies sent by the request. Defaults to {}
• req.query - An object containing the query string. Defaults to {}
• req.body - An object containing the body parsed by content-type, or null if no body was sent