# Build an app with Next.js and Bun (/guides/ecosystem/nextjs)

<!-- agent-signals: reading_time_min: 2 · est_tokens: 841 · updated: 2026-07-28 -->
Related: [Build an app with Astro and Bun](/guides/ecosystem/astro.md), [Create a Discord bot](/guides/ecosystem/discordjs.md), [Containerize a Bun application with Docker](/guides/ecosystem/docker.md), [Use Drizzle ORM with Bun](/guides/ecosystem/drizzle.md), [Use Gel with Bun](/guides/ecosystem/gel.md), [Build an HTTP server using Elysia and Bun](/guides/ecosystem/elysia.md)

[Next.js](https://nextjs.org/) is a React framework for building full-stack web applications. It supports server-side rendering, static site generation, and API routes. Bun installs packages fast and can run Next.js development and production servers.

***

<Steps>
  <Step title="Create a new Next.js app">
    Use the interactive CLI to scaffold a new Next.js project and install its dependencies.

    ```sh icon="terminal" title="terminal" 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 icon="terminal" title="terminal" 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) in your browser to see the result. Changes you make to `app/page.tsx` are hot-reloaded in the browser.
  </Step>

  <Step title="Update scripts in package.json">
    Prefix the Next.js CLI commands in your `package.json` scripts with `bun --bun` so that Bun executes the Next.js CLI for `dev`, `build`, and `start`.

    ```json icon="file-json" title="package.json"
    {
      "scripts": {
        "dev": "bun --bun next dev", // [!code ++]
        "build": "bun --bun next build", // [!code ++]
        "start": "bun --bun next start", // [!code ++]
      }
    }
    ```
  </Step>
</Steps>

***

## Hosting [#hosting]

<Columns cols="3">
  <Card title="Vercel" href="/guides/deployment/vercel" icon="/_assets/2dd7fd4f2be7930ef33d11bebb04d7ad0ca4a7d0992f632988c51258397ac248">
    Deploy on Vercel
  </Card>

  <Card title="Railway" href="/guides/deployment/railway" icon="/_assets/84e64d76e703c561475e67fcce82de1feb19f38f8ff1cdb53930184544852dcf">
    Deploy on Railway
  </Card>

  <Card title="DigitalOcean" href="/guides/deployment/digital-ocean" icon="/_assets/cc228d58e6044862d3c92bb8326826fa2636ea4e5fac9767be79b40c66641dfd">
    Deploy on DigitalOcean
  </Card>

  <Card title="AWS Lambda" href="/guides/deployment/aws-lambda" icon="/_assets/e0b0ddee2cc0c4ebaf67628f0695ce1b18947d9eaff78ece049246b5a7d44cab">
    Deploy on AWS Lambda
  </Card>

  <Card title="Google Cloud Run" href="/guides/deployment/google-cloud-run" icon="/_assets/9478749c7022dcb0c1437909fbd90db63ec62fd3f57689ee933cbeba0b709fce">
    Deploy on Google Cloud Run
  </Card>

  <Card title="Render" href="/guides/deployment/render" icon="/_assets/ae4c03fc1d70e8b9ecc5f722ff6fa39ae91610fefa1c084487aadf78ca510380">
    Deploy on Render
  </Card>
</Columns>

***

## Templates [#templates]

<Columns cols="2">
  <Card title="Bun + Next.js Basic Starter" img="/_assets/ef7025b5f8d15cfe4f1ab87f35780a309567ebedf93327039ce39427f35c239c" 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="/_assets/3b69023ec1e499c82eabc4fa894c38fc1ca16f97e6c79338c5ffcd6632cd69c0" 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>

***

Refer to the [Next.js documentation](https://nextjs.org/docs) for more on building and deploying Next.js applications.