[next.js 공식문서] 07. Route Handlers

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의

Route Handlers

route.js

규칙

route.js 또는 route.ts 파일에 정의됨

export async function GET(request: Request) {}

지원되는 http 메서드

get, post, put, patch, delete, head 및 options를 지원함.
지원 안되는 메서드가 호출되면 405 반환

확장 NextRequest 및 NextResponse API

cookie, json, redirect, rewrite 등

행동

정적 경로 처리기

응답 객체와 함께 GET 메서드를 사용할 때 정적으로 평가됨.

import { NextResponse } from 'next/server';

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 NextResponse.json({ data })
}

robot.txt, rss.xml, sitemap.xml 등 사용자 정의 경로 핸들러를 생성하는데 유용할 수 있음.

동적 경로 처리기

• GET요청에서 request를 사용할때
• GET이 아닌 다른 요청일때
• cookis, header 같은 동적 기능 사용

// request 받아서 처리하는 경우
import { NextResponse } from 'next/server';

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 NextResponse.json({ product })
}

// get이 아닌 메서드
import { NextResponse } from 'next/server';

export async function POST() {
  const res = await fetch('https://data.mongodb-api.com/...', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'API-Key': process.env.DATA_API_KEY,
    },
    body: JSON.stringify({ time: new Date().toISOString() }),
  });

  const data = await res.json();

  return NextResponse.json(data);
}

경로 확인

page.js랑 route.js가 한폴더에 있으면 안됨

예제

정적 데이터 재검증

import { NextResponse } from 'next/server';

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 NextResponse.json(data)
}

또는

export const revalidate = 60;

동적 함수

라우트 핸들러는 cookies, header 같은 동적함수와 함께 사용할 수 있음.

쿠키

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}` }
  });
}

또는

import { type NextRequest } from 'next/server'

export async function GET(request: NextRequest) {
  const token = request.cookies.get('token')
}

이게 난듯

헤더

import { type NextRequest } from 'next/server'

export async function GET(request: NextRequest) {
  const requestHeaders = new Headers(request.headers)
}

얘도 이것만 알면 될듯

리다이렉션

import { redirect } from 'next/navigation';

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

동적 경로 세그먼트

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

스트리밍

// https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream#convert_async_iterator_to_stream
function iteratorToStream(iterator: any) {
  return new ReadableStream({
    async pull(controller) {
      const { value, done } = await iterator.next()

      if (done) {
        controller.close()
      } else {
        controller.enqueue(value)
      }
    },
  })
}

function sleep(time: number) {
  return new Promise((resolve) => {
    setTimeout(resolve, time)
  })
}

const encoder = new TextEncoder()

async function* makeIterator() {
  yield encoder.encode('<p>One</p>')
  await sleep(200)
  yield encoder.encode('<p>Two</p>')
  await sleep(200)
  yield encoder.encode('<p>Three</p>')
}

export async function GET() {
  const iterator = makeIterator()
  const stream = iteratorToStream(iterator)

  return new Response(stream)
}

request body

import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  const res = await request.json();
  return NextResponse.json({ res })
}

CORS

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',
    }
  });
}

Edge 및 Node.js 런타임

Edge는 용량제약으로 쓰기 힘들듯.
https://www.youtube.com/watch?v=RLJ6tPzXB5Q

export const runtime = 'edge'; // 'nodejs' is the default

ui가 아닌 컨텐츠 반환

export async function GET() {
  return new Response(`<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">

<channel>
  <title>Next.js Documentation</title>
  <link>https://nextjs.org/docs</link>
  <description>The React Framework for the Web</description>
</channel>

</rss>`);
}

세그먼트 구성 옵션

page.js나 layout.js와 동일한 경로 세그먼트 구성을 사용함.

export const dynamic = 'auto'
export const dynamicParams = true
export const revalidate = false
export const fetchCache = 'auto'
export const runtime = 'nodejs'
export const preferredRegion = 'auto'