next는 express 기반으로 만들어져 있어 api를 만들고 사용할 수 있습니다.
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를 확인할 수 있습니다.
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를 만들면서 다음의 과정을 수행하게 됩니다.
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);
}
}
};
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");
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,
});
pages
폴더에 api
폴더를 만들고 그 안에 파일을 만들게 되면 그 파일은 API의 경로(path)가 된다.try/catch
문을 사용하여 에러 발생시 서버가 죽는 것을 방지하도록 합니다.