Integrate Dayotana in your NextJS app

#webdev #daytona #nextjs #typescript

Introduction

Daytona is a secure and open-source development environment manager that simplifies your workflow. Imagine starting development on a Next.js app without the usual setup hassle. On average, developers lose 56% of their time setting up environments. Daytona eliminates that wasted time and lets you focus directly on coding.

Why Use Daytona?

Daytona works with:

Any Git platform: GitHub, GitLab, Bitbucket
Any IDE: Vim, VS Code, JetBrains IDEs
Anywhere: Localhost, AWS, Azure, GCP, Digital Ocean

The biggest advantage?

You get a pre-configured environment ready in seconds. Just run this command:

daytona create <REPO_URL>

That's it! Your environment is ready. Now you can focus on building features and fixing bugs.

Using Daytona for Recipe Genie

1️⃣ Install Daytona using this guide.

2️⃣ Configure Daytona

Step 1: Connect Daytona to Your Git Repositories

To manage your code with version control, link Daytona to your Git provider. Run this command in your terminal:

daytona git-providers add

Step 2: Install a Cloud Provider

If you need to create or manage cloud environments (like AWS, Azure, or GCP), install a provider using this command:

daytona provider install

Step 3: Set a Target

A "Target" is where your development environment will run, like Docker (local or remote), AWS, GCP, or others. To choose one, use this command:

daytona target set

Step 4: Choose Your IDE

Daytona supports connecting to many IDEs like VS Code, IntelliJ, and more. To set your default IDE, run:

daytona ide

3️⃣ Add devcontainer.json to the repository.

Create a .devcontainer/devcontainer.json file.

If you're confused about how to create one, you can use Devcontainer AI to generate it for you.

Here's the devcontainer.json I used for Recipe Genie:

{
  "name": "Recipe Genie Dev Container",
  "image": "mcr.microsoft.com/devcontainers/javascript-node",
  "forwardPorts": [3000],
  "customizations": {
    "vscode": {
      "settings": {
        "terminal.integrated.defaultProfile.linux": "bash",
        "files.autoSave": "onWindowChange",
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "extensions": [
        "ms-azuretools.vscode-docker",
        "ms-vscode-remote.remote-containers",
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "dsznajder.es7-react-js-snippets",
        "formulahendry.auto-rename-tag",
        "bradlc.vscode-tailwindcss",
        "christian-kohler.path-intellisense",
        "ms-vscode.vscode-typescript-next"
      ]
    }
  },
  "postCreateCommand": "npm i"
}

4️⃣ Create your workspace and project

daytona create <REPO_URL>

That's it! Your environment is ready.

To start development, simply run:

npm run dev

Some highlights:

Pre-configured environment: Uses the javascript-node devcontainer image from Microsoft.
Post-setup commands: Automatically runs npm i to install dependencies.
VS Code settings: Includes productivity-focused settings and extensions.