Up and Running with Cloudinary’s Next Starter Kit

使用 Cloudinary 的 Next Starter Kit 快速上手

Back in April, we released our React Starter Kit. The React Starter Kit allows you to type one command in the terminal, answer a few questions, and scaffold out a complete, Cloudinary-powered React application, hooked up to all of Cloudinary’s latest and greatest tooling for agentic coding workflows. 今年四月，我们发布了 React Starter Kit。通过 React Starter Kit，你只需在终端输入一条命令，回答几个问题，就能快速搭建一个完整的、由 Cloudinary 驱动的 React 应用程序，并连接到 Cloudinary 所有用于智能代理编码工作流（agentic coding workflows）的最新强大工具。

Today we’re releasing a sequel: npx create-cloudinary-next. If you’re spinning up a fresh, media-driven Next.js application, we think typing those 26 characters into your terminal and hitting return is the best way to start. 今天，我们发布了它的续作：npx create-cloudinary-next。如果你正在启动一个全新的、以媒体为驱动的 Next.js 应用程序，我们认为在终端输入这 26 个字符并回车，是开启项目的最佳方式。

A quick demo of Cloudinary’s Next Starter Kit

Cloudinary Next Starter Kit 快速演示

Here’s a quick example of the kind of app this allows you to quickly prototype. 这是一个简单的示例，展示了该工具能让你快速原型化什么样的应用程序。

What Cloudinary’s Next Starter Kit actually does

Cloudinary Next Starter Kit 到底做了什么？

What does the Next Starter Kit actually do? First, it asks you a few questions about your Cloudinary account and development environment. If you don’t have the necessary prerequisites in place, it’ll guide you through the process of creating them. Once you do, it records your answers in specific environment variables, configuring your app to work with your Cloudinary account. Next Starter Kit 到底做了什么？首先，它会询问你关于 Cloudinary 账户和开发环境的几个问题。如果你还没有准备好必要的先决条件，它会引导你完成创建过程。一旦准备就绪，它会将你的回答记录在特定的环境变量中，从而配置你的应用程序以连接到你的 Cloudinary 账户。

Then, it runs create-next-app, installing Next.js and spinning up a working Next app using our starter template. The template includes our Next.js library and demonstrates use of our official Next.js components for upload and delivery, and suggests a handful of prompts to get you started building. 接着，它会运行 create-next-app，安装 Next.js，并使用我们的入门模板启动一个可运行的 Next 应用程序。该模板包含了我们的 Next.js 库，演示了如何使用我们官方的 Next.js 组件进行上传和交付，并提供了一些提示词（prompts）来帮助你开始构建。

Last, depending which AI coding assistants you told the Starter Kit that you were using during setup, it configures and installs the relevant Cloudinary MCP servers and skills where your assistants can find them. The end result is a running Next.js app that can upload and deliver media from your Cloudinary account using our official Next.js components, and a development environment primed for prompting. 最后，根据你在设置过程中告知的 AI 编码助手，它会配置并安装相关的 Cloudinary MCP 服务器和技能，以便你的助手能够调用它们。最终的结果是一个正在运行的 Next.js 应用程序，它可以使用我们官方的 Next.js 组件从你的 Cloudinary 账户上传和交付媒体，并为你提供了一个已准备好进行提示词交互的开发环境。

The Cloudinary Next.js skill

Cloudinary Next.js 技能

The heart and soul of the agentic story here is our new Next.js skill. The skill is the result of a mountain of user research. Late last year, my colleague Raya Straus spent weeks talking to users, poring over support tickets and error logs, and soliciting reviews from internal experts. The result is a bunch of advice about how to be successful when using Cloudinary generally and our Next.js library specifically, distilled into an installable skill. 这里智能代理故事的核心在于我们全新的 Next.js 技能。这项技能是大量用户研究的结晶。去年年底，我的同事 Raya Straus 花了几周时间与用户交谈，仔细研究支持工单和错误日志，并征求内部专家的意见。最终，我们将关于如何成功使用 Cloudinary（以及专门针对我们的 Next.js 库）的建议提炼成了一个可安装的技能。

When paired with our existing documentation and transformation skills, it helps agentic tooling succeed with Cloudinary and catch common errors. We’re excited to launch the skill alongside the Starter Kit, and to keep iterating on both based on automated evals and feedback from users like you. 当它与我们现有的文档和转换技能结合使用时，可以帮助智能代理工具更好地与 Cloudinary 协作并捕获常见错误。我们很高兴能与 Starter Kit 一起推出这项技能，并将根据自动化评估和像你一样的用户的反馈，持续对两者进行迭代。

And you’re off

现在开始吧

So! if you’re prototyping or building a new media-driven Next.js app, start here: npx create-cloudinary-next. And please, let us know what you think in the comments! 所以！如果你正在原型化或构建一个新的媒体驱动型 Next.js 应用程序，请从这里开始：npx create-cloudinary-next。请务必在评论区告诉我们你的想法！

Cloudinary ❤️ developers Cloudinary ❤️ 开发者

Ready to level up your media workflow? Start using Cloudinary for free and build better visual experiences today. 👉 Create your free account 准备好提升你的媒体工作流了吗？立即免费使用 Cloudinary，构建更好的视觉体验。👉 创建你的免费账户