Skip to main content
Next.js 是一个用于构建全栈 Web 应用的 React 框架。它支持服务器端渲染、静态站点生成、API 路由等功能。Bun 提供快速的包安装，并且可以运行 Next.js 的开发和生产服务器。
1

创建一个新的 Next.js 应用

使用交互式 CLI 创建一个新的 Next.js 应用。这将搭建一个新的 Next.js 项目并自动安装依赖。
terminal
bun create next-app@latest my-bun-app
2

启动开发服务器

切换到项目目录，使用 Bun 启动开发服务器。
terminal
cd my-bun-app
bun --bun run dev
这将使用 Bun 的运行时启动 Next.js 开发服务器。使用浏览器打开 http://localhost:3000 查看效果。对 app/page.tsx 的任何更改都会在浏览器中热更新。
3

更新 package.json 中的脚本

修改 package.json 中的 scripts 字段，在 Next.js CLI 命令前加上 bun --bun。这确保 Bun 来执行 Next.js CLI，用于常见任务如 dev、build 和 start。
package.json
{
  "scripts": {
    "dev": "bun --bun next dev", 
    "build": "bun --bun next build", 
    "start": "bun --bun next start", 
  }
}

​
部署托管

基于 Bun 的 Next.js 应用可以部署到多种平台。
https://mintcdn.com/bun-zhcndoc/cnUTwgMuf4cCrwC-/icons/ecosystem/vercel.svg?fit=max&auto=format&n=cnUTwgMuf4cCrwC-&q=85&s=e92543e72c0e2d1ee325c8c8cf295557

Vercel

部署到 Vercel
https://mintcdn.com/bun-zhcndoc/cnUTwgMuf4cCrwC-/icons/ecosystem/railway.svg?fit=max&auto=format&n=cnUTwgMuf4cCrwC-&q=85&s=6d4ced01059256dc15e14daaab430783

Railway

部署到 Railway
https://mintcdn.com/bun-zhcndoc/cnUTwgMuf4cCrwC-/icons/ecosystem/digitalocean.svg?fit=max&auto=format&n=cnUTwgMuf4cCrwC-&q=85&s=a1693d18e3518f25e10a2d3572d8a02d

DigitalOcean

部署到 DigitalOcean
https://mintcdn.com/bun-zhcndoc/cnUTwgMuf4cCrwC-/icons/ecosystem/aws.svg?fit=max&auto=format&n=cnUTwgMuf4cCrwC-&q=85&s=76b4d37ef79ff74ede5a0d58562736a5

AWS Lambda

部署到 AWS Lambda
https://mintcdn.com/bun-zhcndoc/7hwCkUCcx3ux5DPj/icons/ecosystem/gcp.svg?fit=max&auto=format&n=7hwCkUCcx3ux5DPj&q=85&s=717edc2f17132055927a2f48361ebb55

Google Cloud Run

部署到 Google Cloud Run
https://mintcdn.com/bun-zhcndoc/cnUTwgMuf4cCrwC-/icons/ecosystem/render.svg?fit=max&auto=format&n=cnUTwgMuf4cCrwC-&q=85&s=b0bb39432bfc1ee783888859611d9898

Render

部署到 Render

​
模板

bun-nextjs-basic

Bun + Next.js 基础入门

一个简单的 App Router 入门模板，包含 Bun、Next.js 和 Tailwind CSS。
bun-nextjs-todo

基于 Next.js + Bun 的待办事项应用

一个全栈待办事项应用，使用 Bun、Next.js 以及 PostgreSQL 构建。
→ 查看 Next.js 官方文档 获取更多有关构建和部署 Next.js 应用的信息。