> ## Documentation Index
> Fetch the complete documentation index at: https://docs.builderbox.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Backend Options

> Builder Box offers 4 different backend configurations to suit your development preferences and project requirements. Each option provides the same functionality but with different technology stacks and bundlers.

<Info>
  **Key Difference:** The main setup difference is that you need to copy all
  variables from `server/.env` to `web/.env` for NextAPI configurations, and the
  bundler differs between Bun and Node.js.
</Info>

***

## Configuration Options

<Tabs defaultValue="hono-bun">
  <TabsList>
    <TabsTrigger value="hono-bun">Hono + Bun (Default)</TabsTrigger>
    <TabsTrigger value="nextapi-node">NextAPI + Node</TabsTrigger>
    <TabsTrigger value="hono-node">Hono + Node</TabsTrigger>
    <TabsTrigger value="nextapi-bun">NextAPI + Bun</TabsTrigger>
  </TabsList>

  {" "}

  <TabsContent value="hono-bun">
    <Card>
      <CardHeader>
        <CardTitle>Hono + Bun (Default)</CardTitle>

        <CardDescription>
          Fast, lightweight web framework with Bun runtime
        </CardDescription>
      </CardHeader>

      <CardContent>
        <ul className="list-disc pl-4 space-y-2">
          <li>
            <strong>Backend:</strong> Hono (lightweight web framework)
          </li>

          <li>
            <strong>Runtime:</strong> Bun (fast JavaScript runtime)
          </li>

          <li>
            <strong>Bundler:</strong> Bun's built-in bundler
          </li>

          <li>
            <strong>Performance:</strong> Excellent startup time and memory usage
          </li>

          <li>
            <strong>Compatibility:</strong> Full Node.js compatibility
          </li>
        </ul>
      </CardContent>

      <CardFooter>
        <Link href="/backend-options/hono-bun">View Setup Guide →</Link>
      </CardFooter>
    </Card>
  </TabsContent>

  {" "}

  <TabsContent value="nextapi-node">
    <Card>
      <CardHeader>
        <CardTitle>NextAPI + Node</CardTitle>
        <CardDescription>Next.js API routes with Node.js runtime</CardDescription>
      </CardHeader>

      <CardContent>
        <ul className="list-disc pl-4 space-y-2">
          <li>
            <strong>Backend:</strong> Next.js API routes
          </li>

          <li>
            <strong>Runtime:</strong> Node.js
          </li>

          <li>
            <strong>Bundler:</strong> Webpack (Next.js default)
          </li>

          <li>
            <strong>Performance:</strong> Standard Node.js performance
          </li>

          <li>
            <strong>Compatibility:</strong> Full Node.js ecosystem
          </li>
        </ul>
      </CardContent>

      <CardFooter>
        <Link href="/backend-options/nextapi-node">View Setup Guide →</Link>
      </CardFooter>
    </Card>
  </TabsContent>

  {" "}

  <TabsContent value="hono-node">
    <Card>
      <CardHeader>
        <CardTitle>Hono + Node</CardTitle>
        <CardDescription>Hono framework with Node.js runtime</CardDescription>
      </CardHeader>

      <CardContent>
        <ul className="list-disc pl-4 space-y-2">
          <li>
            <strong>Backend:</strong> Hono (lightweight web framework)
          </li>

          <li>
            <strong>Runtime:</strong> Node.js
          </li>

          <li>
            <strong>Bundler:</strong> Webpack or esbuild
          </li>

          <li>
            <strong>Performance:</strong> Good performance with Node.js
          </li>

          <li>
            <strong>Compatibility:</strong> Full Node.js ecosystem
          </li>
        </ul>
      </CardContent>

      <CardFooter>
        <Link href="/backend-options/hono-node">View Setup Guide →</Link>
      </CardFooter>
    </Card>
  </TabsContent>

  <TabsContent value="nextapi-bun">
    <Card>
      <CardHeader>
        <CardTitle>NextAPI + Bun</CardTitle>

        <CardDescription>
          Next.js API routes with Bun runtime
        </CardDescription>
      </CardHeader>

      <CardContent>
        <ul className="list-disc pl-4 space-y-2">
          <li><strong>Backend:</strong> Next.js API routes</li>
          <li><strong>Runtime:</strong> Bun (fast JavaScript runtime)</li>
          <li><strong>Bundler:</strong> Bun's built-in bundler</li>
          <li><strong>Performance:</strong> Excellent startup time</li>
          <li><strong>Compatibility:</strong> Full Node.js compatibility</li>
        </ul>
      </CardContent>

      <CardFooter>
        <Link href="/backend-options/nextapi-bun">View Setup Guide →</Link>
      </CardFooter>
    </Card>
  </TabsContent>
</Tabs>

***

## Key Differences

### Environment Variables Setup

<Warning>
  **Important:** For NextAPI configurations (NextAPI + Node, NextAPI + Bun), you
  need to copy all variables from `server/.env` to `web/.env`. This is because
  the API routes run within the Next.js application.
</Warning>

### Bundler Differences

| Configuration  | Bundler         | Performance | Bundle Size |
| -------------- | --------------- | ----------- | ----------- |
| Hono + Bun     | Bun bundler     | ⭐⭐⭐⭐⭐       | Small       |
| NextAPI + Node | Webpack         | ⭐⭐⭐         | Medium      |
| Hono + Node    | Webpack/esbuild | ⭐⭐⭐⭐        | Small       |
| NextAPI + Bun  | Bun bundler     | ⭐⭐⭐⭐⭐       | Small       |

### Runtime Performance

| Configuration  | Startup Time | Memory Usage | Cold Start |
| -------------- | ------------ | ------------ | ---------- |
| Hono + Bun     | ⭐⭐⭐⭐⭐        | ⭐⭐⭐⭐⭐        | ⭐⭐⭐⭐⭐      |
| NextAPI + Node | ⭐⭐⭐          | ⭐⭐⭐          | ⭐⭐⭐        |
| Hono + Node    | ⭐⭐⭐⭐         | ⭐⭐⭐⭐         | ⭐⭐⭐⭐       |
| NextAPI + Bun  | ⭐⭐⭐⭐⭐        | ⭐⭐⭐⭐⭐        | ⭐⭐⭐⭐⭐      |

***

## Choosing Your Configuration

### Choose Hono + Bun (Default) if:

* You want the fastest performance
* You're building a new project
* You prefer modern, lightweight frameworks
* You want excellent developer experience

### Choose NextAPI + Node if:

* You're familiar with Next.js API routes
* You need extensive Node.js ecosystem compatibility
* You prefer traditional webpack bundling
* You're migrating from existing Next.js projects

### Choose Hono + Node if:

* You want Hono's lightweight framework
* You need Node.js ecosystem compatibility
* You prefer traditional deployment methods
* You want good performance with familiar tooling

### Choose NextAPI + Bun if:

* You want Next.js API routes with Bun's performance
* You're building a new project with Next.js
* You want the best of both worlds
* You prefer Bun's bundler but want Next.js structure

***

## Next Steps

Select your preferred configuration and follow the specific setup guide:

* [Hono + Bun Setup Guide](./hono-bun) (Default)
* [NextAPI + Node Setup Guide](./nextapi-node)
* [Hono + Node Setup Guide](./hono-node)
* [NextAPI + Bun Setup Guide](./nextapi-bun)

Each guide will walk you through the specific setup process for your chosen configuration.