Vercel

Vercel은 프론트엔드 개발자를 위한 플랫폼이다. 개발자들이 아이디어를 즉시 구현할 수 있도록 빠른 속도와 안정성을 제공한다. 이 섹션에서는 Vercel에서 실행되는 Next.js를 소개한다.

Next.js는 빠른 웹 애플리케이션을 만들 수 있는 빌딩 블록을 제공하는 유연한 React 프레임워크이다.

Next.js에서 Edge Functions을 사용하면 Vercel과 같은 Edge Runtime에서 동적 API를 생성할 수 있다. Hono를 사용하면 다른 런타임과 동일한 문법으로 API를 작성하고 다양한 미들웨어를 활용할 수 있다.

1. 설정

Next.js를 위한 스타터 프로젝트를 사용할 수 있다. "create-hono" 커맨드를 사용해 프로젝트를 시작한다. 이 예제에서는 nextjs 템플릿을 선택한다.

npm

npm create hono@latest my-app

yarn

yarn create hono my-app

pnpm

pnpm create hono my-app

bun

bun create hono@latest my-app

deno

deno init --npm hono my-app

my-app 디렉터리로 이동한 후 의존성을 설치한다.

npm

cd my-app
npm i

yarn

cd my-app
yarn

pnpm

cd my-app
pnpm i

bun

cd my-app
bun i

2. Hello World

App Router를 사용한다면 app/api/[[...route]]/route.ts 파일을 편집한다. 더 많은 옵션은 지원되는 HTTP 메서드 섹션을 참고한다.

import { Hono } from 'hono'
import { handle } from 'hono/vercel'

export const runtime = 'edge'

const app = new Hono().basePath('/api')

app.get('/hello', (c) => {
  return c.json({
    message: 'Hello Next.js!',
  })
})

export const GET = handle(app)
export const POST = handle(app)

Pages Router를 사용한다면 pages/api/[[...route]].ts 파일을 편집한다.

import { Hono } from 'hono'
import { handle } from 'hono/vercel'
import type { PageConfig } from 'next'

export const config: PageConfig = {
  runtime: 'edge',
}

const app = new Hono().basePath('/api')

app.get('/hello', (c) => {
  return c.json({
    message: 'Hello Next.js!',
  })
})

export default handle(app)

3. 실행

로컬에서 개발 서버를 실행한다. 그런 다음 웹 브라우저에서 http://localhost:3000에 접속한다.

npm

npm run dev

yarn

yarn dev

pnpm

pnpm dev

bun

bun run dev

현재 /api/hello는 단순히 JSON을 반환하지만, React UI를 구축하면 Hono를 사용해 풀스택 애플리케이션을 만들 수 있다.

4. 배포

Vercel 계정이 있다면 Git 저장소를 연결하여 배포할 수 있다.

Node.js

Node.js 런타임에서 실행되는 Next.js 위에서도 Hono를 구동할 수 있다.

App Router

App Router를 사용할 때는 라우트 핸들러에서 runtime을 nodejs로 설정하면 된다:

import { Hono } from 'hono'
import { handle } from 'hono/vercel'

export const runtime = 'nodejs'

const app = new Hono().basePath('/api')

app.get('/hello', (c) => {
  return c.json({
    message: 'Hello from Hono!',
  })
})

export const GET = handle(app)
export const POST = handle(app)

페이지 라우터

페이지 라우터를 사용하려면 먼저 Node.js 어댑터를 설치해야 한다:

npm

npm i @hono/node-server

yarn

yarn add @hono/node-server

pnpm

pnpm add @hono/node-server

bun

bun add @hono/node-server

그런 다음, @hono/node-server/vercel에서 가져온 handle 함수를 활용할 수 있다:

import { Hono } from 'hono'
import { handle } from '@hono/node-server/vercel'
import type { PageConfig } from 'next'

export const config: PageConfig = {
  api: {
    bodyParser: false,
  },
}

const app = new Hono().basePath('/api')

app.get('/hello', (c) => {
  return c.json({
    message: 'Hello from Hono!',
  })
})

export default handle(app)

이 코드가 페이지 라우터와 함께 동작하려면, 프로젝트 대시보드나 .env 파일에서 환경 변수를 설정해 Vercel Node.js 헬퍼를 비활성화해야 한다:

NODEJS_HELPERS=0