mirror of
https://github.com/oven-sh/bun
synced 2026-02-02 15:08:46 +00:00
104 lines
3.2 KiB
Plaintext
104 lines
3.2 KiB
Plaintext
---
|
|
title: Build an app with Next.js and Bun
|
|
sidebarTitle: Next.js with Bun
|
|
mode: center
|
|
---
|
|
|
|
[Next.js](https://nextjs.org/) 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.
|
|
|
|
---
|
|
|
|
<Steps>
|
|
<Step title="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.
|
|
|
|
```sh terminal icon="terminal"
|
|
bun create next-app@latest my-bun-app
|
|
```
|
|
|
|
</Step>
|
|
<Step title="Start the dev server">
|
|
Change to the project directory and run the dev server with Bun.
|
|
|
|
```sh terminal icon="terminal"
|
|
cd my-bun-app
|
|
bun --bun run dev
|
|
```
|
|
|
|
This starts the Next.js dev server with Bun's runtime.
|
|
|
|
Open [`http://localhost:3000`](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.
|
|
|
|
</Step>
|
|
<Step title="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`.
|
|
|
|
```json package.json icon="file-json"
|
|
{
|
|
"scripts": {
|
|
"dev": "bun --bun next dev", // [!code ++]
|
|
"build": "bun --bun next build", // [!code ++]
|
|
"start": "bun --bun next start", // [!code ++]
|
|
}
|
|
}
|
|
```
|
|
|
|
</Step>
|
|
</Steps>
|
|
|
|
---
|
|
|
|
## Hosting
|
|
|
|
Next.js applications on Bun can be deployed to various platforms.
|
|
|
|
<Columns cols={3}>
|
|
<Card title="Vercel" href="/guides/deployment/vercel" icon="/icons/ecosystem/vercel.svg">
|
|
Deploy on Vercel
|
|
</Card>
|
|
<Card title="Railway" href="/guides/deployment/railway" icon="/icons/ecosystem/railway.svg">
|
|
Deploy on Railway
|
|
</Card>
|
|
<Card title="DigitalOcean" href="/guides/deployment/digital-ocean" icon="/icons/ecosystem/digitalocean.svg">
|
|
Deploy on DigitalOcean
|
|
</Card>
|
|
<Card title="AWS Lambda" href="/guides/deployment/aws-lambda" icon="/icons/ecosystem/aws.svg">
|
|
Deploy on AWS Lambda
|
|
</Card>
|
|
<Card title="Google Cloud Run" href="/guides/deployment/google-cloud-run" icon="/icons/ecosystem/gcp.svg">
|
|
Deploy on Google Cloud Run
|
|
</Card>
|
|
<Card title="Render" href="/guides/deployment/render" icon="/icons/ecosystem/render.svg">
|
|
Deploy on Render
|
|
</Card>
|
|
</Columns>
|
|
|
|
---
|
|
|
|
## Templates
|
|
|
|
<Columns cols={2}>
|
|
<Card
|
|
title="Bun + Next.js Basic Starter"
|
|
img="/images/templates/bun-nextjs-basic.png"
|
|
href="https://github.com/bun-templates/bun-nextjs-basic"
|
|
arrow="true"
|
|
cta="Go to template"
|
|
>
|
|
A simple App Router starter with Bun, Next.js, and Tailwind CSS.
|
|
</Card>
|
|
<Card
|
|
title="Todo App with Next.js + Bun"
|
|
img="/images/templates/bun-nextjs-todo.png"
|
|
href="https://github.com/bun-templates/bun-nextjs-todo"
|
|
arrow="true"
|
|
cta="Go to template"
|
|
>
|
|
A full-stack todo application built with Bun, Next.js, and PostgreSQL.
|
|
</Card>
|
|
</Columns>
|
|
|
|
---
|
|
|
|
[→ See Next.js's official documentation](https://nextjs.org/docs) for more information on building and deploying Next.js applications.
|