Hono and Next.js together

An app with a Next.js front end and a Hono API in the same repository can share one server. Build it once, then hand it to the other adapter with server:

import { createHono } from "better-supabase/hono";
import { createNext } from "better-supabase/next";
import { betterSupabase } from "./supabase";

export const bsNext = createNext(betterSupabase);

export const api = createHono(betterSupabase, {
  server: bsNext,
  cors: { origin: ["https://app.example.com"] },
});

createHono then does not call createServer again, so both sides use the same Supabase clients, credentials providers and event sinks. The server options you pass next to server are ignored.

import { api } from "./lib/bs";

export const app = api
  .app()
  .use("/api/*", api.middleware())
  .get("/api/me", (c) => c.json({ id: c.var.auth.user?.id }));

CookiesCopy Anchor Link

The Next.js proxy refreshes the session and writes the cookies. The Hono middleware reads the same cookies and never refreshes, so a Hono API on the same site sees the session the proxy refreshed. An API on another origin needs cors and a bearer token instead of cookies.

CORSCopy Anchor Link

cors on createHono answers preflights and adds the headers to every route of app(). true uses the headers supabase-js sends and * as the origin; { origin, headers, methods, maxAge } narrows them. The same option exists on createEdge.

Problem DetailsCopy Anchor Link

api.app() installs api.onError, which turns a thrown DbException or an unexpected error into an RFC 9457 response. Pass exposeErrors to include messages outside development.