[Next.js] API 라우터

• Next.js는 pages/api 아래에 놓인 파일에서 API(JSON 기반의 Web API)를 정의할 수 있다.
• 생성된 API는 페이지와 마찬가지로 파일의 위치에 따라 경로가 결정된다.
• 페이지에서 사용하는 간이적인 API의 구현, 프락시로서 사용할 수 있다.
• 빌드시에는 이 API를 사용할 수 없으므로, SSG의 getStaticPaths나 getStaticProps로부터 호출할 수 없다.
• 다음 코드를 pages/api/hello.ts에 입력하고, 서버를 기동한 뒤 /api/hello를 호출하면 핸들러가 실행된다.

import type { NextApiRequest, NextApiResponse } from "next";

type Data = {
  name: string;
};

// api/hello에서 호출될 때의 API 작동을 구현한다.
export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  // 상태 200으로 { name: "문지은" }을 반환한다.
  res.status(200).json({ name: "문지은" });
}

• CSR로 접근해보자.
• fetch로 api에 접근할 때는 부가 작용이 발생하므로 useEffect 안에서 처리한다.

import { useState, useEffect } from "react";

function Sayhello() {
  // 내부에서 상태를 가지므로 useState를 사용
  const [data, setData] = useState({ name: "" });

  // 외부 API에 요청하는 것은 부가 작용이므로 useEffect에서 처리
  useEffect(() => {
    fetch("api/hello")
      .then((res) => res.json())
      .then((profile) => {
        setData(profile);
      });
  }, []);

  return <div>hello {data.name}</div>;
}

export default Sayhello;