将 Daytona 集成到您的 NextJS 应用程序中 开源开发环境管理器示例 Recipe Genie

2025-06-09

将 Daytona 集成到你的 NextJS 应用中

开源开发环境管理器

样品食谱精灵

介绍

Daytona 是一款安全开源的开发环境管理器，可简化您的工作流程。想象一下，无需繁琐的设置，即可开始开发Next.js应用。平均而言，开发人员在设置环境上会浪费56% 的时间。Daytona 可以消除这些时间浪费，让您专注于编码。

Daytona - 运行 AI 生成代码的安全基础设施

使用 Daytona 闪电般的基础架构，自信地部署 AI 代码。200 毫秒环境创建、状态化操作和企业级安全性。立即试用，即可获得 100 美元抵用金。

网站图标daytona.io

为什么要使用 Daytona？

Daytona 可与以下公司合作：

  • 任何 Git 平台：GitHub、GitLab、Bitbucket我的技能
  • 任何 IDE：Vim、VS Code、JetBrains IDE我的技能
  • 任何地方：Localhost、AWS、Azure、GCP、Digital Ocean我的技能

最大的优势是什么？

几秒钟内即可获得预配置的环境。只需运行以下命令：

daytona create <REPO_URL>
Enter fullscreen mode Exit fullscreen mode

就这样！你的环境已经准备好了。现在你可以专注于构建功能📈和修复错误🐛了。

使用 Daytona 制作 Recipe Genie

1️⃣使用本指南安装 Daytona。

2️⃣配置 Daytona

步骤 1：将 Daytona 连接到你的 Git 仓库。
要使用版本控制管理代码，请将 Daytona 链接到你的 Git 提供商（例如 Github）。在终端中运行以下命令：

daytona git-providers add
Enter fullscreen mode Exit fullscreen mode

第 2 步：安装云提供商
如果您需要创建或管理云环境（如 AWS、Azure 或 GCP），请使用以下命令安装提供商：

daytona provider install
Enter fullscreen mode Exit fullscreen mode

步骤 3：设置目标
“目标”是指你的开发环境将运行的位置，例如 Docker（本地或远程）、AWS、GCP 或其他。要选择一个目标，请使用以下命令：

daytona target set
Enter fullscreen mode Exit fullscreen mode

步骤 4：选择您的 IDE
Daytona 可以连接到许多 IDE，例如 VS Code、IntelliJ 等。要设置默认 IDE，请运行：

daytona ide
Enter fullscreen mode Exit fullscreen mode

3️⃣添加devcontainer.json到存储库。

创建.devcontainer/devcontainer.json文件。

您可以使用 ai生成一个。

这是devcontainer.json我用于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"
}
Enter fullscreen mode Exit fullscreen mode

4️⃣创建你的工作区和项目

daytona create <REPO_URL>
Enter fullscreen mode Exit fullscreen mode

就这样！您的环境已准备就绪。

要开始开发，只需运行以下命令：

npm run dev
Enter fullscreen mode Exit fullscreen mode

文件的一些亮点devcontainer.json：

  • 预配置环境：使用javascript-node来自 Microsoft 的 devcontainer 映像。
  • 安装后命令：自动运行npm i以安装依赖项。
  • VS Code 设置：包括用于高效开发的有用的 VSC 设置和扩展，例如 Prettier、ESLint 和 React/Next.js 工具。
  • PORT 转发：自动转发端口 3000 以从主机访问开发服务器。

结论

Daytona 通过自动化环境设置简化了开发流程。立即试用 Daytona，体验其带来的非凡体验！

如果您喜欢这个博客，请表达对 Recipe Genie 和 Daytona 的喜爱。

GitHub 徽标 迪通拿/迪通拿

开源开发环境管理器。

文档 执照 围棋成绩单 问题 - 代托纳 GitHub 发布

 

代托纳标志

使用单个命令在任何基础架构上设置开发环境

代托纳演示

文档·报告错误·请求功能·加入我们的 Slack ·在 X 上连接

开源开发环境管理器

详细/手动设置步骤请点击此处

Mac / Linux

curl -sfL get.daytona.io | sudo bash && daytona server -y && daytona
Enter fullscreen mode Exit fullscreen mode

视窗

powershell -Command "irm https://get.daytona.io/windows | iex; daytona serve"
Enter fullscreen mode Exit fullscreen mode

打开一个新终端并运行以下命令来创建您的第一个开发环境：

daytona create
Enter fullscreen mode Exit fullscreen mode

开始编码。

特征

  • 快速设置：使用单个命令激活完全配置的开发环境 - daytona create。
  • 随处运行：在任何机器上启动您的开发环境；本地、远程、基于云、物理服务器或 VM 以及任何架构；x86 或 ARM。
  • 各种提供商支持：选择流行的提供商，如 AWS、GCP、Azure、DigitalOcean等，或在裸机上使用 Docker。
  • IDE 支持：无缝支持……
在 GitHub 上查看

GitHub 徽标 kom-senapati / Recipe-Genie-Daytona

🧞‍♂️ 由 TheMealDB 提供支持的终极烹饪伴侣，助您发现美味食谱和类别

样品食谱精灵

Recipe Genie 是一款探索美味食谱的首选应用，由 TheMealDB 提供支持。您可以探索各种菜肴，用随机食谱给自己一个惊喜，或者浏览不同的类别。有了 Recipe Genie，享受轻松有趣的烹饪之旅吧！它是一款使用TheMealDB构建的简单 Next.js 应用。

🚀 入门

使用 Daytona 打开

  1. 安装 Daytona：按照Daytona 安装指南进行操作。

  2. 创建工作区：

    daytona create https://github.com/kom-senapati/Recipe-Genie-Daytona.git
    Enter fullscreen mode Exit fullscreen mode

  3. 启动应用程序：

    npm run dev
    Enter fullscreen mode Exit fullscreen mode

🤔为什么要使用 DevContainer 和 Daytona？

DevContainer

  • 简化 VS Code 中的开发环境设置。
  • 非常适合开源项目中的团队协作。
  • 消除了为贡献者创建开发环境的麻烦。
  • 自动配置扩展和设置以获得一致的体验。

迪通拿

  • 适用于任何 Git 平台：GitHub、GitLab、Bitbucket。
  • 与任何 IDE兼容：Vim、VS Code、JetBrains IDE。
  • 可在任何地方运行：Localhost、AWS、Azure、GCP、Digital Ocean。
  • 灵活高效……


在 GitHub 上查看


再见

鏂囩珷鏉ユ簮锛�https://dev.to/komsenapati/integrate-dayotana-in-your-nextjs-app-36ei
Devto 翻译
PREV
优化游戏性能：基本技术和工具
NEXT
成为一名技术作家