API 라우트 생성하기
Next.js의 API 라우트 기능은 서버리스 함수를 쉽게 생성할 수 있게 해주는 강력한 도구입니다.
이 절에서는 API 라우트의 기본 개념, 생성 방법, 그리고 사용 사례에 대해 알아보겠습니다.
API 라우트란?
API 라우트는 Next.js 애플리케이션 내에서 API 엔드포인트를 생성할 수 있게 해주는 기능입니다.
이를 통해 별도의 서버를 구축하지 않고도 서버리스 API를 만들 수 있습니다.
API 라우트 파일 생성
Next.js의 App Router에서 API 라우트를 생성하려면 app/api 디렉토리 내에 route.js 파일을 만들면 됩니다.
예를 들어, /api/hello 엔드포인트를 만들고 싶다면 다음과 같이 파일을 생성합니다.
export async function GET(request) {
return new Response('Hello, Next.js!')
} 이제 http://localhost:3000/api/hello로 GET 요청을 보내면 "Hello, Next.js!"라는 응답을 받을 수 있습니다.
요청 처리 및 응답 반환
API 라우트에서는 HTTP 메서드에 따라 다른 함수를 export할 수 있습니다.
예를 들어, GET, POST, PUT, DELETE 요청을 처리하는 API를 만들어 보겠습니다.
export async function GET(request) {
// 사용자 목록 반환 로직
return new Response(JSON.stringify({ users: ['Alice', 'Bob', 'Charlie'] }), {
headers: { 'Content-Type': 'application/json' },
})
}
export async function POST(request) {
const body = await request.json()
// 새 사용자 생성 로직
return new Response(JSON.stringify({ message: 'User created' }), {
status: 201,
headers: { 'Content-Type': 'application/json' },
})
}동적 API 라우트 구현
동적 세그먼트를 사용하여 동적 API 라우트를 만들 수 있습니다.
예를 들어, 특정 사용자의 정보를 가져오는 API를 만들어 보겠습니다.
export async function GET(request, { params }) {
const id = params.id
// id를 사용하여 특정 사용자 정보 조회 로직
return new Response(JSON.stringify({ id, name: `User ${id}` }), {
headers: { 'Content-Type': 'application/json' },
})
} 이제 /api/users/1, /api/users/2 등의 URL로 요청을 보내면 각 ID에 해당하는 사용자 정보를 받을 수 있습니다.
6장 데이터 페칭과의 연결
API 라우트는 6장에서 다룬 데이터 페칭과 밀접하게 연관됩니다.
클라이언트 컴포넌트에서 fetch를 사용하여 API 라우트로 요청을 보낼 수 있으며, 서버 컴포넌트에서도 API 라우트를 통해 데이터를 가져올 수 있습니다.
예를 들어,
// 클라이언트 컴포넌트에서
const response = await fetch('/api/users')
const data = await response.json()
// 서버 컴포넌트에서
async function getData() {
const res = await fetch('http://localhost:3000/api/users')
return res.json()
}
export default async function Page() {
const data = await getData()
// ...
}실습 : CRUD 기능 및 RESTful API 구현
간단한 사용자 관리 시스템을 위한 CRUD(Create, Read, Update, Delete) API를 구현해보겠습니다.
- 사용자 목록 조회 (GET /api/users)
- 특정 사용자 조회 (GET /api/users/[id])
- 새 사용자 생성 (POST /api/users)
- 사용자 정보 수정 (PUT /api/users/[id])
- 사용자 삭제 (DELETE /api/users/[id])
let users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
]
export async function GET() {
return new Response(JSON.stringify(users), {
headers: { 'Content-Type': 'application/json' },
})
}
export async function POST(request) {
const body = await request.json()
const newUser = { id: users.length + 1, name: body.name }
users.push(newUser)
return new Response(JSON.stringify(newUser), {
status: 201,
headers: { 'Content-Type': 'application/json' },
})
}// app/api/users/[id]/route.js
export async function GET(request, { params }) {
const user = users.find(u => u.id === parseInt(params.id))
if (user) {
return new Response(JSON.stringify(user), {
headers: { 'Content-Type': 'application/json' },
})
}
return new Response(JSON.stringify({ error: 'User not found' }), {
status: 404,
headers: { 'Content-Type': 'application/json' },
})
}
export async function PUT(request, { params }) {
const body = await request.json()
const index = users.findIndex(u => u.id === parseInt(params.id))
if (index !== -1) {
users[index] = { ...users[index], ...body }
return new Response(JSON.stringify(users[index]), {
headers: { 'Content-Type': 'application/json' },
})
}
return new Response(JSON.stringify({ error: 'User not found' }), {
status: 404,
headers: { 'Content-Type': 'application/json' },
})
}
export async function DELETE(request, { params }) {
const index = users.findIndex(u => u.id === parseInt(params.id))
if (index !== -1) {
const deletedUser = users.splice(index, 1)[0]
return new Response(JSON.stringify(deletedUser), {
headers: { 'Content-Type': 'application/json' },
})
}
return new Response(JSON.stringify({ error: 'User not found' }), {
status: 404,
headers: { 'Content-Type': 'application/json' },
})
}이 실습을 통해 기본적인 CRUD 작업을 수행하는 RESTful API를 구현할 수 있습니다.
실제 애플리케이션에서는 데이터베이스를 사용하여 영구적으로 데이터를 저장하고 관리해야 합니다.
API 라우트는 Next.js 애플리케이션에서 백엔드 기능을 쉽게 구현할 수 있게 해주는 강력한 도구입니다.
이를 통해 풀스택 애플리케이션을 단일 프로젝트 내에서 개발할 수 있으며, 서버리스 아키텍처의 이점을 활용할 수 있습니다.