[Next JS] Next 13에서 API routes 만들기(feat. 동적 라우팅)

넥스트 프레임워크가 13버전으로 업데이트 된지 시간이 좀 지났지만, 뒤늦게 적응하려다가 기존 버전과는 약간 다르게 API route 구현해야 함을 깨닫고, 공식 웹사이트에서 살펴본 것들을 정리해보려고 한다.

 

참고 : https://nextjs.org/docs/app/building-your-application/routing/route-handlers#dynamic-route-segments

Routing: Route Handlers | Next.js

 

1. API routes?

API Routes는 Next.js 애플리케이션 내에서 서버 측 코드를 작성하여 API 엔드포인트를 만들 수 있는 기능이다. 이를 통해 클라이언트와 서버 간의 통신을 용이하게 하고 데이터를 처리할 수 있도록 도와준다. API Routes를 사용하면 RESTful API 엔드포인트를 만들거나 데이터베이스와 상호 작용할 수 있다.

 

2. API routes 만드는 법

기존에는 /pages 폴더 안에 /api 경로를 추가하여 그 안에 여러 [route의 이름].js 형식으로 만들어야 했다.

// /pages/api/getData.js

export default async function handler(req, res){
	const {id} = req.params
    // id 파라미터로 db에서 데이터 가져오는 함수
    
    res.status(200).json({data})
}

 

이렇게 작성된 API route는 클라이언트 사이드에서 fetch 함수를 이용해 '/api/getData' 경로를 사용하여 데이터를 가지고 올 수 있었다.

 

그러나 13버전에서는 굳이 /api 경로를 추가하지 않아도 사용할 수 있었다. 그리고 /pages 폴더가 없고, /app 폴더 안에 /[route의 이름 폴더]/route.js 파일을 만들어주면 된다. 여기서 API routes의 엔드포인트 파일은 항상 route.[js|ts] 이름으로 되어있어야 한다.

// /app/getData/route.js

export async function GET(req){
	// db에서 데이터 가져오는 함수
    
    const data = .....
    
    return Response.json({ data });
}

그리고 함수의 이름은 HTTP 통신의 메서드의 이름이 되어야 한다. 대문자로 통일해야 오류가 뜨지 않는다.

GET, POST, PUT, DELETE 등으로 해주어야 하며, 파라미터는 response는 제외하고 request가 들어가게 되며, 항상 NextResponse 객체를 return 해주어야 오류가 뜨지 않는다.

 

// /app/writeData/route.js

export async function POST(req) {

// body에 JSON.stringify({imgUrl, title, body})으로 전달한 value들은 
// await req.json()로 간단히 deconstruction 할수 있다.
    
  const { imgUrl, title, body } = await req.json();

  const id = // db에 새로운 데이터 POST하고 얻은 insertId 

  return Response.json({ id });
}

 

3. 동적으로 라우팅하기

이전 12버전에서는 클라이언트 사이드 fetch 함수에서 사용한 경로에 따른 query나 params를 API 엔드포인트에서 받아 request를 파싱하면 됬었지만, 13버전에서는 좀 달라졌다. 나도 여기서 바뀐줄 모르고 왜 자꾸 fetch 함수의 경로가 잘못되었다고 오류가 뜨는지 멍하니 있었다.

// /app/getData/[id]/route.js

export async function GET(req, {params}){
	
    const id = params.id
    
    // id로 데이터 가져오는 함수

	return Response.json({data})
}

 

다음과 같이 /app 폴더 안에 /[route의 이름] 의 폴더를 하나 더 만들어주고, params에 들어갈 변수 nested 폴더를(여기서는 [id]) 하나 더 만들어주고 그 안에 route.js를 만들어 코드를 작성해주면 된다. 그 안에서 params를 변수로 받아서 개발자가 원하는 기능을 코드로 풀어나갈 수 있다.