Next.js

Next.js ist ein flexibles React-Framework, das dir Bausteine zum Erstellen schneller Webanwendungen bietet.

Du kannst Hono auf Next.js mit der Node.js-Laufzeitumgebung ausführen.
Auf Vercel lässt sich Hono zusammen mit Next.js einfach über Vercel Functions bereitstellen.

1. Einrichtung

Für Next.js steht eine Projektvorlage zur Verfügung. Starte dein Projekt mit dem Befehl „create-hono“. Wähle für dieses Beispiel die Vorlage nextjs aus.

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

Wechsle nach my-app und installiere die Abhängigkeiten.

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

Wenn du den App Router verwendest, bearbeite app/api/[[...route]]/route.ts. Weitere Optionen findest du im Abschnitt Unterstützte HTTP-Methoden.

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

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

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

export const GET = handle(app)

`handle` comes from the `@hono/vercel` package, which the starter installs. On an existing project, add it with `npm i @hono/vercel`.
export const POST = handle(app)

3. Ausführen

Starte den Entwicklungsserver lokal. Öffne anschließend http://localhost:3000 in deinem Webbrowser.

npm

npm run dev

yarn

yarn dev

pnpm

pnpm dev

bun

bun run dev

Momentan gibt /api/hello nur JSON zurück. Wenn du eine React-Oberfläche entwickelst, kannst du mit Hono eine Fullstack-Anwendung erstellen.

4. Bereitstellung

Wenn du ein Vercel-Konto hast, kannst du die Anwendung durch Verknüpfen des Git-Repositorys bereitstellen.

Pages Router

Wenn du den Pages Router verwendest, musst du zunächst den Node.js-Adapter installieren.

npm

npm i @hono/node-server

yarn

yarn add @hono/node-server

pnpm

pnpm add @hono/node-server

bun

bun add @hono/node-server

Anschließend kannst du die aus @hono/node-server importierte Funktion getRequestListener in pages/api/[[...route]].ts verwenden.

import { getRequestListener } from '@hono/node-server'
import { Hono } from 'hono'
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 Next.js!',
  })
})

export default getRequestListener(app.fetch)

Damit dies mit dem Pages Router funktioniert, musst du die Node.js-Helfer von Vercel deaktivieren, indem du eine Umgebungsvariable im Projekt-Dashboard oder in deiner .env-Datei festlegst.

NODEJS_HELPERS=0