Build an app with Next.js and Bun

Next.js is a React framework for building full-stack web applications. It supports server-side rendering, static site generation, API routes, and more. Bun provides fast package installation and can run Next.js development and production servers.

---

1. Create a new Next.js app

   Use the interactive CLI to create a new Next.js app. This will scaffold a new Next.js project and automatically install dependencies.

   terminal

   bun create next-app@latest my-bun-app
   
2. Start the dev server

   Change to the project directory and run the dev server with Bun.

   terminal

   cd my-bun-app
   bun --bun run dev
   

   This starts the Next.js dev server with Bun’s runtime.

   Open http://localhost:3000 with your browser to see the result. Any changes you make to app/page.tsx will be hot-reloaded in the browser.

3. Update scripts in package.json

   Modify the scripts field in your package.json by prefixing the Next.js CLI commands with bun --bun. This ensures that Bun executes the Next.js CLI for common tasks like dev, build, and start.

   package.json

   {
     "scripts": {
       "dev": "bun --bun next dev", 
       "build": "bun --bun next build", 
       "start": "bun --bun next start", 
     }
   }
   

---

Hosting

Next.js applications on Bun can be deployed to various platforms.

Vercel

Deploy on Vercel

Railway

Deploy on Railway

DigitalOcean

Deploy on DigitalOcean

AWS Lambda

Deploy on AWS Lambda

Google Cloud Run

Deploy on Google Cloud Run

Render

Deploy on Render

---

Templates

Bun + Next.js Basic Starter

A simple App Router starter with Bun, Next.js, and Tailwind CSS.

Go to template

Todo App with Next.js + Bun

A full-stack todo application built with Bun, Next.js, and PostgreSQL.

Go to template

---

→ See Next.js’s official documentation for more information on building and deploying Next.js applications.