Back to templates

Template details

Hono + Next.js Starter

A starter template that integrates the Hono web framework with a Next.js app using the App Router.

About this template

A Hono and Next.js starter template is a boilerplate project that wires the Hono web framework into a Next.js application using the App Router, giving developers a ready-to-run base for building API routes. It is forked from the official honojs/starter templates/nextjs directory and updated so the Hono API lives under Next.js's App Router structure rather than the older pages-based layout.

What is the Hono + Next.js Starter?

The Hono and Next.js starter is a boilerplate that combines the Hono HTTP framework with a Next.js front end that uses the App Router. Its only visible function is to bootstrap a project: you run it locally, get a working Next.js app at http://localhost:3000, and then build Hono API handlers inside a single catch-all route file. It is maintained as a fork of the official Hono starter templates, with the change of moving from the original Next.js setup to the App Router convention.

What makes this template stand out?

  • Hono integrated with Next.js — the project starter combines the Hono framework with Next.js so API logic and page rendering can share one codebase.
  • App Router structure — unlike the original Hono Next.js template, this fork is updated to use Next.js's App Router.
  • Single API entry point — API code is edited in app/api/[...route]/route.tsx, which is a catch-all route that hands requests to Hono.
  • Multiple package managers — the README documents starting the dev server with npm, yarn, pnpm or bun via npm run dev, yarn dev, pnpm dev or bun dev.
  • Local preview on port 3000 — running the dev script serves the app at http://localhost:3000 in the browser.
  • Forked from official source — the template is based on the honojs/starter repository's templates/nextjs folder, so it inherits Hono's documented API patterns.
  • Vercel deployment — the README points to deploying through the Vercel Platform and Next.js deployment documentation.

Who is it for?

  • Full-stack JavaScript developers: start a project where a Hono API and a Next.js App Router front end live in one repository.
  • Developers evaluating Hono: try the Hono framework inside a familiar Next.js environment before committing to a stack.
  • Teams starting a new API-backed app: use the catch-all route file as the place to add endpoints instead of writing server code from scratch.
  • Next.js users wanting a lighter API layer: follow the linked Hono API documentation to build routes on top of the starter.

What can you do with the Hono + Next.js Starter?

  • Kick off a new app: clone the starter and run the dev script to get a working Next.js app with the Hono API mounted under app/api/[...route]/route.tsx.
  • Add API endpoints: edit the catch-all route file to define Hono handlers, using Hono's API documentation for routing and middleware.
  • Deploy to Vercel: follow the linked Vercel and Next.js deployment guides to publish the app.

How does the Hono + Next.js Starter work?

  1. Run the dev server with npm, yarn, pnpm or bun.
  2. Open http://localhost:3000 to view the running app.
  3. Edit app/api/[...route]/route.tsx to add or change API routes handled by Hono.

FAQ

What is the Hono + Next.js Starter?

It is a project template that combines the Hono web framework with Next.js using the App Router. It is forked from the honojs/starter repository's templates/nextjs directory and updated so Hono API code lives in a catch-all route at app/api/[...route]/route.tsx.

Which Next.js router does this template use?

The template uses the Next.js App Router. The README states the project is forked from the Hono starter templates and updated to use the App Router, which distinguishes it from the original Next.js template it was based on.

How do I run the Hono + Next.js Starter?

Run the development server with npm run dev, yarn dev, pnpm dev or bun dev, then open http://localhost:3000 in a browser. The README gives no other setup steps beyond running the dev script.

Where do I add API routes in the Hono + Next.js Starter?

API routes are added by editing app/api/[...route]/route.tsx. The README describes this file as the place to start editing the API and links to Hono's API documentation for learning the framework's routing features.

How do I deploy the Hono + Next.js Starter?

The README recommends the Vercel Platform, linking to a Vercel templates search for Hono and to the Next.js deployment documentation for further details. It does not describe any other deployment method.

Screenshot of Hono + Next.js Starter