Next.js에서 제공하는 api 기능을 이용해서, api 서버를 만들고 orm을 통해 실제 DB와 연결시키는 것이 목적
1. Next.js api 기능 이용
- pages 디렉터리 구조가 router가 되듯이 pages 폴더 안에 api 폴더를 생성한다.
- api폴더를 생성 후 그 안에 파일을 작성하면 api url이 된다.
import { NextApiRequest, NextApiResponse } from "next";
import withHandler from '../../libs/server/withHandler'
async function handler(req: NextApiRequest, res: NextApiResponse) {
//... 로직
res.status(200).json({ ok: true })
}
export default withHandler("GET", handler)
withHandler 함수의 목적은 handler에서 동일하게 발생하는 보일러 플레이트를 줄이기 위함.
예를 들어, method 검증이나 로그인/비로그인 상태에 따라 redirect 시키는 로직 등등
handler 함수는 마지막에 res.status(200).json({ ok: true }) 를 통해 client에게 응답을 해줄 수 있다.
// withHandler 내부 구조
import { useState } from "react";
import { NextApiRequest, NextApiResponse } from "next";
export interface ResponseType {
[key: string]: any;
ok: boolean;
}
export default function withHandler(
method: "POST" | "GET" | "DEL" | "PUT",
fn: (req: NextApiRequest, res: NextApiResponse) => void
) {
return async function (req: NextApiRequest, res: NextApiResponse) {
if (req.method !== method) {
return res.status(405).end();
}
try {
fn(req, res);
} catch (e) {
return res.status(500).json({ e });
}
};
}
'FrontEnd > Next.js' 카테고리의 다른 글
[Next.js] NextAuth로 로그인 처리하기(feat. 로그인 페이지 커스텀) (0) | 2023.01.23 |
---|---|
[Next.js] bcrypt 를 통해 비밀번호 암호화 (0) | 2023.01.23 |
[Next.js] OAuth(2.0)를 통한 로그인 인증 (0) | 2023.01.10 |
페이지 렌더링 비교 (SSR vs CSR vs SSG (0) | 2023.01.04 |
[Next.js][보수 공사 필요] getServerSideProps, getStaticProps ( Data Fetching in Next ) (0) | 2023.01.04 |