[Next.js] api 만들기, api 데이터 불러오기

api 란?

[프로그래밍] API란?

 

Next.js 에서 api 만들기

 

1. api에 활용할 샘플 데이터 만들기

// utils/smaple-data.js

export const sampleUserData = [
  { id: 101, name: '엘리스' },
  { id: 102, name: '밥' },
  { id: 103, name: '캐롤라인' },
  { id: 104, name: '데이브' },
];

// 유저 데이터를 나타낼 샘플 데이터 만들기

 

2. Next.js에서 api 만들기

// pages/api/users/index.js

// 위에서 만든 유저 데이터 불러오기
import { sampleUserData } from '../../../utils/sample-data';


const handler = (_req, res) => {
  // 아래 내용 실행, 실패시 에러 감지후 catch에게 보냄
  try {
  
    // sampleUserData가 Array가 아닐때 에러 메시지 출력
    if (!Array.isArray(sampleUserData)) {
      throw new Error('Cannot find user data');
    }

    // sampleUserData가 Array 일때 정상코드(200) 응답(res)하고, json형식으로 유저 데이터 출력
    res.status(200).json(sampleUserData);
  } catch (err: any) {
    // try 실패시, 에러코드(500) 응답(res)하고, json형식으로 에러 메시지 출력
    res.status(500).json({ statusCode: 500, message: err.message });
  }
};

export default handler;

 

3. api 접속하기

"http://localhost:3000/api/users" 로 접속하면, 우리가 만든 api가 데이터를 불러와준다!