接下来我们将使用cursor创建一个CURD的应用,它使用next.js作为前端,虽然我们不懂next.js代码,但是完全可以使用prompt的方式来构建完成。
Next.js是一个基于React的全栈开发框架,大大简化了React应用的开发流程,是现代Web开发的理想选择。它提供了许多开箱即用的功能:

在cursor中新建一个项目,打开terminal,执行以下命令:
npx create-next-app@latest

所有选项均保持默认,一路回车。创建完成后目录如下:

运行app:
cd curd-app
npm run dev

npm run dev对应的命令如下:

访问本地3000端口,查看应用页面:

在page.tsx页面添加一个按钮,用于跳转到/dashboards页面:

生成完代码后,点击Apply。 Apply完后,实时检查浏览器,发现多了一个Manage API Keys按钮:

它还会问是否帮创建/dashboards的基本页面,回答帮我创建,然后将代码应用到项目:

但是这个路径要调整下,放到curd-app/app/dahsboards/page.tsx:

回到浏览器,点击Manage API keys会跳转到新的页面,cursor生成的代码已经创建好基本的页面组件:

还可以继续与cursor交互,生成其他的功能:

这里先不继续生成,留到下一节。