Rapid Full-Stack Web App Development with Bun.js, Next.js & Elysia.js

Rapid Full-Stack Web App Development with Bun.js, Next.js & Elysia.js

The Problem (Why This Matters Now)

Modern web development demands speed, type safety, and a cohesive developer experience across the entire stack. Traditional setups pair Express or Fastify backends with Next.js frontends, but this introduces runtime overhead and fragmented type-sharing between client and server. Developers routinely face boilerplate fatigue when wiring up authentication, database access, API contracts, and deployment pipelines from scratch.

As of 2026, the ecosystem has shifted toward faster cold starts, lower memory footprints, and unified tooling. Bun.js addresses these gaps as a drop-in runtime and package manager. Elysia.js provides a high-performance, type-safe backend framework that natively integrates with Bun, offering built-in OpenAPI documentation and validation without extra boilerplate.

What You Will Build or Learn

This guide walks you through a monorepo full-stack application using Bun workspaces with two apps: a Next.js 15 frontend (App Router) and an Elysia.js API backend. You will learn:

• End-to-end TypeScript type safety between client and server, similar to tRPC but with explicit route paths and no contract boilerplate.
• Automatic React Query (useQuery/useMutation) hook generation from Elysia route definitions.
• Authentication with better-auth, database access with Drizzle ORM (PostgreSQL), and UI with shadcn/ui + Tailwind CSS.
• Local development with Docker Compose (PostgreSQL, RustFS for S3-compatible object storage) and optional Cloudflare Tunnel for public exposure.
• Production-ready Dockerized deployment with a single build command.
• Access to Bun globals (e.g., Bun.password, Bun.file) inside React Server Components and leveraging Hot Module Reloading.

Prerequisites

• Bun v1.0.0 or higher (recommended runtime and package manager; see bun.sh).
• Node.js v18.0.0 or higher (for tools that still require it).
• Docker and Docker Compose for running the development database and local S3 storage.
• A GitHub account (for Cloudflare Tunnel auth and optional Railway deployment).
• Basic familiarity with TypeScript, React, and the Next.js App Router.

Step-by-Step Implementation

1. Clone the Template and Install Dependencies

Start by cloning the official template repository and installing dependencies with Bun:

git clone https://github.com/tonkaew131/nextjs-elysia-template.git
cd nextjs-elysia-template
bun i

The template includes a pre-configured monorepo structure with Next.js 15 (App Router), shadcn/ui, automatic type inference from the API and database schema, and automatic useQuery and useMutation hook generation [1].

2. Configure Environment Variables

Copy the environment template and fill in your credentials:

cp .env.template .env
# Edit .env with your database URL, auth secrets, and S3/RustFS credentials

3. Start the Development Infrastructure

Spin up PostgreSQL and RustFS (local S3-compatible storage) via Docker Compose:

docker-compose -f docker-compose.dev.yml up -d

This ensures the Elysia API and database-dependent features have the services they need before the dev server starts [1].

4. (Optional) Set Up Cloudflare Tunnel for Local Development

For public exposure of your local environment, run the Bun tunnel command:

bun tunnel

This exposes the Next.js frontend, Elysia API (/api), and RustFS S3 with public tunneled URLs and automatically updates .env with the tunnel URLs [1].

5. Launch the Development Server

Start the full-stack dev environment:

bun dev

This serves the Next.js frontend at http://localhost:3000, the Elysia.js backend with OpenAPI docs at http://localhost:3000/api/openapi, and the RustFS local S3 console at http://localhost:9000 [1].

6. Generate React Query Hooks for API Integration

After defining Elysia routes, auto-generate typed hooks for the frontend:

bun api:gen

This scans Elysia route definitions and produces typed useQuery and useMutation hooks, eliminating manual API client boilerplate [1].

7. Create and Apply Database Migrations

Generate a new Drizzle migration and apply it:

# Generate a new Drizzle migration
bun db:gen --name "migration_name"

# Apply pending migrations to PostgreSQL
bun db:migrate

8. Build and Run in Production (Docker)

For a production build, run:

bun run docker

This builds the Next.js frontend and Elysia API, then serves from the .next folder. Alternatively, run bun build then bun start or NODE_ENV=production bun start [2].

9. Run Code Quality Checks Before Committing

Ensure consistency across the monorepo:

bun run check

This runs Biome (linter/formatter) and TypeScript type checking [1].

Common Pitfalls

• Using npm or yarn instead of bun: The template is configured for Bun workspaces; using npm/yarn can cause workspace resolution and script incompatibilities [1].
• Skipping docker-compose up before bun dev: The Elysia API and database-dependent features require PostgreSQL and RustFS to be running first [1].
• Editing .env without restarting the dev server: Environment variable changes require a server restart to take effect [1].
• Assuming Node.js-only tooling works identically: Bun's native implementations of fetch, crypto, and Bun.file behave differently in some edge cases; test browser-facing file uploads and crypto operations explicitly [2].
• Forgetting to run bun api:gen after adding new Elysia routes: The frontend will lack typed hooks for newly added endpoints until regeneration [1].
• Cloudflare Tunnel token expiration: Long-running tunnel sessions may require re-authentication; check the tunnel dashboard if connections drop [1].

Next Steps

Explore alternative templates and extend the starter app:

• ItzDerock/bun-elysia-nextjs: A minimal setup demonstrating Bun + Elysia + Next.js app-dir with end-to-end typesafety and Railway deployment. ItzDerock's version uses the eden connector for type-safe client-server communication and reports idle CPU usage at 0% and ~280MB of RAM on start, compared to ~400MB for a similar Node.js app [2][3].
• altinthaqi/next-elysia-template: A variant using eden connector, Lucia authentication, and Prisma ORM instead of Drizzle, with GitHub CI configured for standards checks on every push [4].
• jirayusueb/bun-fullstack-mono: A Turborepo-managed monorepo with TanStack Query and T3 Env for type-safe environment variables [5].
• guangzan/nahida-template: A Next.js 16 + Elysia.js variant with Ultracite AI-friendly formatting and Lefthook git hooks [6].

Extend the template with additional Elysia plugins such as WebSocket support and rate limiting, then deploy to Railway, Fly.io, or a self-hosted Docker host. Contribute back to the template ecosystem by adding support for other databases (SQLite, MySQL) or alternative auth providers.

Conclusion

The combination of Bun.js, Next.js 15, and Elysia.js delivers a fast, type-safe, and low-boilerplate full-stack development experience. With automatic hook generation, built-in OpenAPI docs, and a single-command Dockerized deployment, you can move from zero to production in hours rather than days. Clone the template, follow the steps above, and start building.

References

• tonkaew131/nextjs-elysia-template
• ItzDerock/bun-elysia-nextjs
• altinthaqi/next-elysia-template
• jirayusueb/bun-fullstack-mono
• guangzan/nahida-template
• Bun.sh
• Elysia.js
• Next.js App Router