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/ikxin/RzFFGbzo0-4huILA/icons/ecosystem/vercel.svg?fit=max&auto=format&n=RzFFGbzo0-4huILA&q=85&s=1b2fe3a37a8b9b2445a2cfe6fd5503e9

Vercel

部署到 Vercel
https://mintcdn.com/ikxin/RzFFGbzo0-4huILA/icons/ecosystem/railway.svg?fit=max&auto=format&n=RzFFGbzo0-4huILA&q=85&s=ed0ef6c0858e87aa929e5d603a8d2147

Railway

部署到 Railway
https://mintcdn.com/ikxin/RzFFGbzo0-4huILA/icons/ecosystem/digitalocean.svg?fit=max&auto=format&n=RzFFGbzo0-4huILA&q=85&s=13a9569175a09db90ce31e590445096e

DigitalOcean

部署到 DigitalOcean
https://mintcdn.com/ikxin/RzFFGbzo0-4huILA/icons/ecosystem/aws.svg?fit=max&auto=format&n=RzFFGbzo0-4huILA&q=85&s=4b94088538a2487ea0348f5b87435abc

AWS Lambda

部署到 AWS Lambda
https://mintcdn.com/ikxin/RzFFGbzo0-4huILA/icons/ecosystem/gcp.svg?fit=max&auto=format&n=RzFFGbzo0-4huILA&q=85&s=93cdf4b7287c2eaefe9b1ff96d87a57b

Google Cloud Run

部署到 Google Cloud Run
https://mintcdn.com/ikxin/RzFFGbzo0-4huILA/icons/ecosystem/render.svg?fit=max&auto=format&n=RzFFGbzo0-4huILA&q=85&s=cdfb76ea4d86b3df32d2fd101df5a543

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 应用的信息。