Next.js

Next.js est un framework React flexible qui fournit les briques nécessaires pour créer des applications web rapides.

Vous pouvez exécuter Hono sur Next.js avec l'environnement d'exécution Node.js.
Sur Vercel, les Vercel Functions permettent de déployer facilement Hono avec Next.js.

1. Configuration

Un modèle de démarrage est disponible pour Next.js. Créez votre projet avec la commande « create-hono ». Sélectionnez le modèle nextjs pour cet exemple.

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

Ouvrez my-app et installez les dépendances.

npm

cd my-app
npm i

yarn

cd my-app
yarn

pnpm

cd my-app
pnpm i

bun

cd my-app
bun i

2. Bonjour le monde

Si vous utilisez l'App Router, modifiez app/api/[[...route]]/route.ts. Consultez la section Méthodes HTTP prises en charge pour les autres options.

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. Exécution

Démarrez le serveur de développement localement. Ensuite, ouvrez http://localhost:3000 dans votre navigateur web.

npm

npm run dev

yarn

yarn dev

pnpm

pnpm dev

bun

bun run dev

Pour l'instant, /api/hello renvoie simplement du JSON, mais en créant des interfaces React, vous pouvez réaliser une application full-stack avec Hono.

4. Déploiement

Si vous avez un compte Vercel, vous pouvez déployer en liant le dépôt Git.

Pages Router

Si vous utilisez le Pages Router, vous devez d'abord installer l'adaptateur 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

Vous pouvez ensuite utiliser la fonction getRequestListener, importée depuis @hono/node-server, dans pages/api/[[...route]].ts.

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)

Pour que cela fonctionne avec le Pages Router, il est important de désactiver les helpers Node.js de Vercel en définissant une variable d'environnement dans le tableau de bord du projet ou dans votre fichier .env.

NODEJS_HELPERS=0