Next.js - 넥스트 API

next는 express 기반으로 만들어져 있어 api를 만들고 사용할 수 있습니다.

1. next api test

pages 폴더 안에 api 폴더를 만들고 그 안에 파일을 만들게 되면 파일의 위치는 api의 경로가 됩니다.

> pages/api/todos.ts

import { NextApiRequest, NextApiResponse } from 'next';

export default (req: NextApiRequest, res: NextApiResponse) => {
  return res.send('Next API')
}

터미널에서 테스트를 진행합니다.

$ curl http://localhost:3000/api/todos

다음과 같이 유효한 테스트 결과를 얻을 수 있습니다.

브라우저 url로 접속해도 화면에 출력되는 Next API를 확인할 수 있습니다.

2. todolist 불러오기 api

data/todos.json 파일을 만들어 todo 목록을 관리하겠습니다.

> data/todos.json

[
	{ "id": 1, "text": "리액트 공부하기", "color": "red", "checked": true },
	{ "id": 2, "text": "노드 공부하기", "color": "orange", "checked": true },
	{ "id": 3, "text": "넥스트 공부하기", "color": "yellow", "checked": false },
	{ "id": 4, "text": "타입스크립트 공부하기", "color": "green", "checked": false },
	{ "id": 5, "text": "개인 프로젝트 환경설정", "color": "navy", "checked": true }
];

todolist를 불러오는 api를 만들어 보도록 하겠습니다. api를 만들면서 다음의 과정을 수행하게 됩니다.

1. HTTP method가 GET인지 확인합니다.
2. 파일의 데이터를 불러옵니다.
3. 파일의 데이터를 객체로 결과 값으로 보내줍니다.

request method가 GET인지 테스트를 진행합니다.
> pages/api/todos.ts

import { NextApiRequest, NextApiResponse } from "next";

export default (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method === "GET") {
    return res.send("Hello Next API");
  }

  res.statusCode = 405;
  console.log(res.statusCode);
  return res.end();
};

터미널에서 GET, POST로 request를 요청하면 각각 다른 결과를 확인할 수 있습니다.
이제 fs 모듈을 이용하여 todos.json 데이터를 불러오도록 코드를 작성하겠습니다.

> pages/api/todos.ts

import { NextApiRequest, NextApiResponse } from "next";
import { readFileSync } from "fs";
import { TodoType } from "../../types/todo";

export default async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method === "GET") {
    try {
      const todosBuffer = readFileSync("data/todos.json");
      const todosString = todosBuffer.toString();
      if (!todosString) {
        res.statusCode = 200;
        res.send([]);
      }
      const todos: TodoType[] = JSON.parse(todosString);
      res.statusCode = 200;
      return res.send(todos);
    } catch (error) {
      console.log(error);
      res.statusCode = 500;
      res.send(error);
    }
  }
};

3. axios 사용하기

axios의 api 메인 경로를 설정합니다.
> lib/api/index.ts

import Axios from 'axios';

const axios = Axios.create({
	baseURL: "http://localhost:3000",
})

export default axios;

api에 관련된 함수를 모아서 관리하는 파일을 만듭니다.
> lib/api/todo.ts

import axios from '.';
import { TodoType } from '../../types/todo';

// todolist 불러오기 API
export const getTodosAPI = () => axios.get<TodoType[]>("api/todos");

• todo에 관련된 api를 모아서 관리하게 되면 api를 찾기 쉽고 재사용이 가능하다는 장점이 있습니다.

4. 환경변수(env) 설정하기

api 메인 경로와 같은 정보들을 환경변수로 관리하도록 하겠습니다.
> .env.local

NEXT_PUBLIC_API_URL=http://localhost:3000

axios의 baseURL도 수정해 주도록 하겠습니다.
> lib/api/index.ts

const axios = Axios.create({
	baseURL: process.env.NEXT_PUBLIC_API_URL,
});

정리

1. next는 express 기반으로 만들어져 있어서 API를 만들고 사용할 수 있습니다.
2. pages 폴더에 api폴더를 만들고 그 안에 파일을 만들게 되면 그 파일은 API의 경로(path)가 된다.
   • request.method를 통해 동일한 path로 들어오는 요청에 대해 다른 작업을 진행할 수 있으므로 REST API 구현에도 도움이 됩니다.
3. 비동기 처리의 경우 항상 try/catch문을 사용하여 에러 발생시 서버가 죽는 것을 방지하도록 합니다.
4. 연관된 api의 경우 하나의 파일로 모아서 관리하게 되면 유지 보수가 쉽고 재사용이 가능해집니다.