This skill should be used when the user asks about "Next.js with Bun", "Bun and Next", "running Next.js on Bun", "Next.js development with Bun", "create-next-app with Bun", or building Next.js applications using Bun as the runtime.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
This skill should be used when the user asks about "Next.js with Bun", "Bun and Next", "running Next.js on Bun", "Next.js development with Bun", "create-next-app with Bun", or building Next.js applications using Bun as the runtime.
metadata
{"version":"1.0.0"}
license
MIT
Bun Next.js
Run Next.js applications with Bun for faster development and builds.
Quick Start
# Create new Next.js project with Bun
bunx create-next-app@latest my-app
cd my-app
# Install dependencies
bun install
# Development
bun run dev
# Build
bun run build
# Production
bun run start
Secure Installation
Scaffolding tools like bunx create-next-app download and execute remote code. Multiple install contexts (local, Docker) require pinning versions in both. Before running, follow supply chain security best practices:
Block post-install scripts — Bun disables them by default; allow specific packages via trustedDependencies in package.json
Cooldown period — Configure minimumReleaseAge in bunfig.toml to wait 7 days for new versions
Audit before installing — Run socket package score npm <pkg> or use socket npm install <pkg> to check packages
Load the dependency-upgrade skill for full security configuration including Socket CLI integration, cooldown setup, lockfile validation, and CI enforcement.
{"scripts":{"dev":"bun --bun next dev","build":"bun --bun next build","start":"bun --bun next start"}}
The --bun flag forces Next.js to use Bun's runtime instead of Node.js.
Configuration
next.config.js
/** @type {import('next').NextConfig} */const nextConfig = {
// Turbopack is the default bundler in Next.js 16 (top-level, not under experimental)turbopack: {},
// Server-side Bun APIsserverExternalPackages: ["bun:sqlite"],
// Note: a `webpack` key is no longer supported in Next.js 16 — Turbopack is the// default bundler and a `webpack` config will fail `next build`. Bun-specific// imports (`bun:sqlite`, `bun:ffi`) are handled via `serverExternalPackages`// above. If you truly need the webpack bundler, run `next build --webpack`.
};
module.exports = nextConfig;
// app/actions.ts"use server";
import { Database } from"bun:sqlite";
import { revalidatePath } from"next/cache";
exportasyncfunctioncreateUser(formData: FormData) {
const name = formData.get("name") asstring;
const db = newDatabase("data.sqlite");
db.run("INSERT INTO users (name) VALUES (?)", [name]);
db.close();
revalidatePath("/users");
}
exportasyncfunctiondeleteUser(id: number) {
const db = newDatabase("data.sqlite");
db.run("DELETE FROM users WHERE id = ?", [id]);
db.close();
revalidatePath("/users");
}
Proxy (formerly Middleware)
In Next.js 16, middleware.ts is renamed to proxy.ts (the middleware name still
works but is deprecated). Proxy runs on the Node.js runtime, not the Edge runtime.
⚠️ Deploying to Cloudflare via OpenNext? Keep middleware.ts.@opennextjs/cloudflare does not yet recognize the proxy.ts filename — renaming
will silently disable your middleware on Cloudflare. Until OpenNext adds support,
deploy with the classic middleware.ts (it still works in Next 16, just deprecated
upstream). This caveat does not apply to Node.js/Vercel/Bun-native deployments.
// Access in server components/actionsconst dbUrl = process.env.DATABASE_URL;
const secret = process.env.API_SECRET;
// Expose to client (prefix with NEXT_PUBLIC_)// .env.localNEXT_PUBLIC_API_URL=https://api.example.com
Deployment
Build for Production
bun run build
bun run start
Docker
FROM oven/bun:1
WORKDIR /app
COPY package.json bun.lockb ./
RUN bun install --frozen-lockfile
COPY . .
RUN bun run build
EXPOSE 3000
CMD ["bun", "run", "start"]
