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

# Next.js Setup

This guide walks you through scaffolding a [Next.js](https://nextjs.org) app inside an Upstash Box and opening it in your browser through a public URL, without using an agent.

The box gives you a full Linux environment with Node.js already installed, so you can create the app, run the dev server, and share it, all through the SDK.

***

## 1. Create a Box

Create a box with the `node` runtime. You don't need to configure an agent for this. See the [quickstart](/box/overall/quickstart) if you haven't created one before.

<CodeGroup>
  ```typescript box.ts theme={"system"}
  import { Box } from "@upstash/box"

  const box = await Box.create({ runtime: "node" })
  ```

  ```python box.py theme={"system"}
  from upstash_box import Box

  box = Box.create(runtime="node")
  ```
</CodeGroup>

***

## 2. Scaffold the App

Run `create-next-app` inside the box. The `--yes` flag accepts the default options so the setup runs without prompts, installing all dependencies.

<CodeGroup>
  ```typescript box.ts theme={"system"}
  await box.exec.command("npx --yes create-next-app@latest my-next-app --yes")
  ```

  ```python box.py theme={"system"}
  box.exec.command("npx --yes create-next-app@latest my-next-app --yes")
  ```
</CodeGroup>

***

## 3. Start the Dev Server

Start the development server in the background so the command returns while Next.js keeps running on port `3000`. Commands run from the box's home directory (`/workspace/home`), where the app was created.

<CodeGroup>
  ```typescript box.ts theme={"system"}
  await box.exec.command("cd my-next-app && nohup npm run dev > dev.log 2>&1 &")
  ```

  ```python box.py theme={"system"}
  box.exec.command("cd my-next-app && nohup npm run dev > dev.log 2>&1 &")
  ```
</CodeGroup>

***

## 4. Create a Public URL

Expose port `3000` with a public URL to view the app in your browser. Creating a public URL for a running server returns its address.

<CodeGroup>
  ```typescript box.ts theme={"system"}
  const publicUrl = await box.getPublicURL(3000)

  console.log(publicUrl.url)
  // → https://<box-id>-3000.preview.box.upstash.com
  ```

  ```python box.py theme={"system"}
  public_url = box.get_public_url(3000)

  print(public_url.url)
  # -> https://<box-id>-3000.preview.box.upstash.com
  ```
</CodeGroup>

Open the URL in your browser and your Next.js app loads. See [Public URLs](/box/overall/preview) for authentication and other options.

<Note>
  Next.js blocks cross-origin dev resources by default, so hot reloading won't work over the public URL until you add the host to `allowedDevOrigins` in `next.config.ts`:

  ```typescript next.config.ts theme={"system"}
  const nextConfig: NextConfig = {
    allowedDevOrigins: ["<box-id>-3000.preview.box.upstash.com"],
  }
  ```
</Note>