/my-next-app

Primary LanguageTypeScript

My Next.js App with Daytona Integration

This is a Next.js project integrated with Daytona Sandbox functionality, allowing you to create Sandboxes and sync files to them.

Features

  • 🚀 Create Daytona Sandbox
  • 📁 Batch upload files to Sandbox
  • 📊 Real-time operation logs
  • 🔒 Secure API key management (server-side)
  • 🎨 Modern UI interface

Environment Setup

  1. Copy the environment variable example file:
cp .env.local.example .env.local
  1. Edit the .env.local file and fill in your Daytona configuration:
DAYTONA_API_KEY=your_daytona_api_key_here
DAYTONA_API_URL=https://app.daytona.io/api

Getting Daytona API Key

  1. Visit Daytona Console
  2. Log in to your account
  3. Generate API Key in settings
  4. Choose appropriate target location (e.g.: us, eu, asia)

Getting Started

First, install dependencies:

npm install
# or
yarn install
# or
pnpm install

Then, start the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 to view the application.

Using Daytona Features

  1. Click the "🚀 Daytona Sandbox" button on the page
  2. Click "Create Sandbox" to create a new Sandbox
  3. Use "Select Files" button to choose files to upload
  4. Click "Upload Files" to sync files to the Sandbox
  5. View operation logs for detailed information

API Routes

The project includes the following API endpoints:

  • POST /api/daytona - Create Sandbox, upload files, and other operations
  • GET /api/daytona - Get Sandbox information

Tech Stack

Deployment

Vercel Deployment

The easiest way to deploy is using Vercel Platform:

  1. Push code to GitHub
  2. Import project in Vercel
  3. Add environment variables in Vercel project settings:
    • DAYTONA_API_KEY
    • DAYTONA_API_URL

Cloudflare Pages Deployment

The project is configured to support Cloudflare Pages:

npm run deploy

Make sure to add the same environment variables in Cloudflare Pages settings.

Learn More

Contributing

Issues and Pull Requests are welcome!