nextjs 14 app router에서 custom api 작성을 위한 Route Handlers

next.js 14

next.js 14 app router

 

next.js

next.js 14에서는 기존 pages라는 폴더 기반의 라우팅에서 app router로 변경되었다.

next.js 서버에서 custom api를 작성하는 방법에도 약간의 변화가 있기 때문에 이에 대해서 공유한다.

 

export const dynamic = 'force-dynamic' // defaults to auto
export async function GET(request: Request) {}

app/api/route.ts

 

위 예시를 보면 page.js나 layout.js처럼 파일 기반 route를 제공한다.

app 폴더 내부에 동일한 방식으로 route.ts 파일을 작성하면된다.

 

동일하게 app폴더 내에서 파일 기반으로 동작하기 때문에 중첩을 피하기 위해서 api라는 별도의 폴더를 두었다.

next.js

next.js

HTTP 메소드

 

GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS. 지원되지 않는 메서드를 호출하면 Next.js는 405 Method Not Allowed 응답을 반환한다.

캐싱

export async function GET() {
  const res = await fetch('https://data.mongodb-api.com/...', {
    headers: {
      'Content-Type': 'application/json',
      'API-Key': process.env.DATA_API_KEY,
    },
  })
  const data = await res.json()
 
  return Response.json({ data })
}

app/items/route.ts

 

위와같이 GET 메소드와 Response 객체를 함께 사용하는 경우 기본적으로 캐싱된다.

 

캐싱을 해제 하는 방법

 

1. Request 객체와 GET 메소드는 사용하는 경우

 

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const id = searchParams.get('id')
  const res = await fetch(`https://data.mongodb-api.com/product/${id}`, {
    headers: {
      'Content-Type': 'application/json',
      'API-Key': process.env.DATA_API_KEY!,
    },
  })
  const product = await res.json()
 
  return Response.json({ product })
}

 

2. GET 메소드 이외에 메소드를 사용합니다.

3. Using Dynamic Functions like cookies and headers.
4. The Segment Config Options manually specifies dynamic mode.

 

캐시된 데이터 재검증

export async function GET() {
  const res = await fetch('https://data.mongodb-api.com/...', {
    next: { revalidate: 60 }, // Revalidate every 60 seconds
  })
  const data = await res.json()
 
  return Response.json(data)
}

 

* revalidate 옵션을 사용해서 가능

 

Dynamic Functions 동적 기능

 

쿠기설정

import { cookies } from 'next/headers'
 
export async function GET(request: Request) {
  const cookieStore = cookies()
  const token = cookieStore.get('token')
 
  return new Response('Hello, Next.js!', {
    status: 200,
    headers: { 'Set-Cookie': `token=${token.value}` },
  })
}

 

물론 일반적인 방식처럼 웹 API를 통해 request에서 cookie를 읽을수도 있다.

 

import { type NextRequest } from 'next/server'
 
export async function GET(request: NextRequest) {
  const token = request.cookies.get('token')
}

 

헤더

import { headers } from 'next/headers'
 
export async function GET(request: Request) {
  const headersList = headers()
  const referer = headersList.get('referer')
 
  return new Response('Hello, Next.js!', {
    status: 200,
    headers: { referer: referer },
  })
}

이 headers인스턴스는 읽기 전용입니다. Response헤더를 설정하려면 new 를 사용 하여 new Response를 반환해야 한다.

 

기본 웹 API를 사용하여 요청( NextRequest)에서 헤더를 읽을 수도 있다.

import { type NextRequest } from 'next/server'
 
export async function GET(request: NextRequest) {
  const requestHeaders = new Headers(request.headers)
}

 

Redirects

import { redirect } from 'next/navigation'
 
export async function GET(request: Request) {
  redirect('https://nextjs.org/')
}

 

PATH 파라미터 적용

app/items/[slug]/route.ts

export async function GET(
  request: Request,
  { params }: { params: { slug: string } }
) {
  const slug = params.slug // 'a', 'b', or 'c'
}

 

URL 쿼리 파라미터 적용

import { type NextRequest } from 'next/server'
 
export function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams
  const query = searchParams.get('query')
  // query is "hello" for /api/search?query=hello
}

 

 

CORS 설정

export const dynamic = 'force-dynamic' // defaults to auto
 
export async function GET(request: Request) {
  return new Response('Hello, Next.js!', {
    status: 200,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
    },
  })
}