기존 회사 프로젝트의 프론트 부분을 Next.js로 마이그레이션 타당성 조사 중
Next.js 13버전이 나오지 꽤 지나서 기존에 12버전을 쓰거나 13버전을 12처럼 사용해왔기에
13버전에 생긴 기능을 전체적으로 사용해 보자 해서 일단 프로젝트 만들고 api를 만드니 안되서 공식문서를 확인하게 됨
12버전 까지만 해도
api 폴더에 index.js로 api를 만들어왔다
//ex) /api/members/index.js
export async function handler(req, res) {
기능...
}
그리고 HTTP 메소드에 따라서
//ex) /api/members/index.js
export async function handler(req, res) {
if (req.method === 'GET') {
기능
} else if (req.method === 'POST') {
기능
} else if (req.method === 'PUT') {
기능
}
}
같이 작성하여 코드의 가독성이 떨어지는 부분이 있었다
일단 index.js 에서 index 예약어는 route로 변경되었다 고로 route.js 또는 route.ts 로 만들어줘야 하며
13버전 부터는 많은게 변경되었다
//ex) /api/members/route.js
export async function GET(req) {
기능
return NextResponse.json(응답 값)
}
export async function POST() {
기능
}
함수 명은 HTTP 메소드로 변경되었다
GET 메소드로 요청들어온거는 GET이라는 함수 명을 가진 함수로 호출되고
POST는 POST, PUT은 PUT으로 들어간다
또한 return시 js/ts 상관 없이 NextResponse
를 사용해야 한다.
참고:
야무지게 바꼈네요