Next.js13

개요

기존 회사 프로젝트의 프론트 부분을 Next.js로 마이그레이션 타당성 조사 중

Next.js 13버전이 나오지 꽤 지나서 기존에 12버전을 쓰거나 13버전을 12처럼 사용해왔기에

13버전에 생긴 기능을 전체적으로 사용해 보자 해서 일단 프로젝트 만들고 api를 만드니 안되서 공식문서를 확인하게 됨

기존 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') {
      기능
    }
}

같이 작성하여 코드의 가독성이 떨어지는 부분이 있었다

13버전에서의 API

일단 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를 사용해야 한다.

참고:

• https://nextjs.org/docs/app/building-your-application/routing/router-handlers