接下来我们将使用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交互,生成其他的功能:
这里先不继续生成,留到下一节。