每个AI工程师都应该学习Next.js

“如果UI丑陋，没有人会关心你的AI模型或架构。——未知”

免责声明： 这篇博客反映了我个人的经验，并不是说这种方法对每个人都有效。这不是一个Next.js教程，也不是教你如何学习Next.js的指南。相反，它是为了展示为什么Next.js是自由职业者的一个有价值的附加技能，并且通过它可以让你与其他AI工程师区分开来，因为它使你能够构建全栈应用。请注意，我已经了解React JS。

1、引言

当我们说“我是AI/ML工程师”时，通常意味着我们是后端工程师，专注于AI模型。没错，这就是我们在实际应用系统中的角色。

让我们坦诚地说：大多数AI工程师不喜欢前端开发，我过去也是其中之一。在四年的编程生涯中，我只专注于AI和机器学习。这感觉很有成就感，但在获得一份工作并掌握某一领域后，我意识到探索其他技术技能的价值。对于AI工程师（或ML工程师——这两个术语经常相同）来说，学习前端开发是非常值得的。

在这篇文章中，我将从一个Python爱好者和认为前端其实很简单的AI工程师的角度，向你展示如何学习前端开发。

2、为什么选择Next JS？

Streamlit可能看起来像是一个用于快速原型设计的小项目，但如果你认真考虑构建高质量、引人注目的UI应用程序，是时候学习一个真正实用的UI框架如Next.js了。那么，为什么Next.js是最好的框架呢？它之所以特别是因为它利用了React.js（一个流行的用于构建动态用户界面的库），并增强了服务器端渲染（SSR）、静态站点生成（SSG）以及内置路由系统等功能。

与仅专注于视图层的React.js不同，Next.js是一个完整的框架，通过处理优化、SEO和性能等问题简化了开发过程，而无需你拼凑无数第三方工具。

你可能会想：既然有React.js，为什么还要用Next.js？答案很简单——React.js给你一张空白画布，而Next.js提供了一幅结构化的杰作，节省了时间和精力，同时提供了更快、更可扩展的应用程序。这就是组装一辆车从零开始与直接驾驶一辆经过调校的速度和可靠性俱佳的汽车之间的区别。这就是为什么Next.js成为现代开发者的首选。

3、从哪里开始？

我知道大多数AI开发者讨厌前端开发！我们可以轻松理解复杂的Transformer架构——有些人甚至可以从头开始构建它——但我们仍然认为HTML和CSS是最难且最无聊的部分（尤其是CSS）。我承认，即使现在，我也不是很喜欢学习CSS属性。但多亏了像ChatGPT、Claude等工具，编写CSS脚本变得容易多了。

如今，你不需要从头到尾都学。只需了解应用程序是如何工作的基本概念。花3-4个小时这个周末看一个简单的视频。HTML和CSS一开始可能感觉枯燥，但一旦你开始学习JavaScript（JS），你会发现它非常有趣。它不像Python脚本那样——它既令人兴奋又充满乐趣！

JavaScript和Python开发者之间有什么共同点？

都讨厌Java 😝。

投资学习JavaScript是你现在能做的最好的事情之一——就像投资黄金一样！整个互联网都在运行JavaScript。你可以阅读一份简单的文档（点击这里）来了解JS语法和你想知道的一切。我认为使用AI工具比花费数小时观看YouTube视频或阅读冗长的文档来学习任何语言更好。

所以，在花了两个周末学习HTML、CSS和JS之后，是时候深入研究最好的JS库了：React.js！你应该把学习重点放在React.js上。要开始学习React.js，我建议观看这个视频(点击这里)。尝试构建2-3个小项目，从基础到高级概念逐步深入React.js。你的目标很简单：理解事物的工作原理以及如何将它们连接起来创建一个完整的AI应用。完成这一步后，就可以转向Next.js了！

4、Next JS生态系统

在学习JavaScript之后，花一天或更少的时间学习TypeScript（TS），它是JavaScript的超集，增加了类型支持。在几个小时内掌握其基础知识，如类型和接口。然后，探索Tailwind CSS，这是一个高效的样式工具包，并查看ShadCN UI，它基于Tailwind构建了可定制的UI组件。这将为你提供一个快速而扎实的TypeScript和现代前端工具的基础。

• TypeScript
• TailwindCSS
• Shadcn/UI

你不需要精通所有内容——只需了解TypeScript、Tailwind CSS和ShadCN UI是什么以及它们的功能即可。你的目标是将它们与Next.js集成。

现在，是时候深入研究Next.js这个强大的框架了！从这个简单的教程(点击这里)开始，探索它的功能，如基于app的路由，并了解pages和layouts的区别。这将帮助你清楚地了解Next.js及其相关库。

真正的乐趣从这里开始：利用AI来处理编码和调试提示，从而节省你数小时的努力！

5、V0的魔力

Vercel最近推出了v0，这是一个革命性的UI引擎，可以根据简单的用户提示使用Next.js生成用户界面。这个工具是一个游戏规则改变者，通过消除从头开始构建项目的需要，为开发人员节省了无数小时。即使是免费层级，用户也能获得大量的提示请求，足以创建基本结构、部分、页面和响应式导航栏。v0生成的TypeScript文件（.tsx）利用shadcn和Tailwind CSS，让开发人员可以专注于功能理解而不是语法斗争。一旦项目准备就绪，你可以通过一个简单的npm命令轻松将其克隆到本地——可以通过ChatGPT的搜索模式或Vercel的官方文档找到详细信息。

6、$150的故事

我的一位朋友最近来找我，希望为他们的业务建立一个在线存在感，并需要一个网站。与此同时，我的健身房会员续费即将到期，我必须管理好财务以支付这笔费用。我答应他们会在四天内交付一个完全可用的网站。巧合的是，我当时正在学习Next.js，并刚刚通过X上的帖子了解到Vercel的v0 UI引擎。受到启发，我打开笔记本电脑，关掉手机，立即投入任务。

第一天，我使用v0创建了网站的基本结构。我大量实验了提示词，以设计布局和组件，这为我节省了大量的时间。在第二天和第三天，我使用一个简单的命令从Vercel克隆项目到本地，并在另一个标签页中打开了ChatGPT以获取额外的支持。从那里开始，一切都变得轻而易举。我重新构建了Home、About、Industries和Contact等单独的组件，然后用客户提供的公司数据填充它们。我还同步了联系表单与他们的Gmail账户。在Vercel上托管网站非常顺利。Vercel的CI/CD管道在每次向分支提交新代码时都会自动构建Next.js应用。

托管完成后，我与客户分享了实时网站以获取反馈。他们提出了一些修改意见，我很快实施了这些修改。最后一天，他们提供了域名和GoDaddy登录凭据。我花了两个小时研究Next.js的SEO工作原理，然后添加了一个sitemap.xml文件，以确保Google可以抓取该网站。链接主机名后，网站在短短20分钟内上线。

最终，他们支付了我150美元，足够支付我的健身房会员费。虽然这远低于市场价，但我作为交易的一部分，还提供了终身网站更新、Google Business设置以及持续维护服务。仅仅用了四天，我就利用像v0和ChatGPT这样的AI工具，为我的客户打造了一个功能齐全的网站。这段经历让我见识到了现代工具的强大之处，它们能够简化开发流程，并将紧迫的截止日期转化为成功的故事。

7、关于 Next.js 的更多内容

Next.js 提供了令人印象深刻的众多功能，远远超出了我最初所使用的范围。到目前为止，我只是用它来创建一个商业着陆页，但现在我正在深入挖掘它在构建 AI 驱动的应用程序或平台方面的潜力。我的目标是将我的 FastAPI 后端（负责 AI 功能）与 Next.js 前端集成起来，以创建一个无缝的用户界面。Next.js 甚至配备了 NextAuth.js 等工具用于身份验证，使其成为全栈开发的多功能选择。随着我对这些功能的探索，我兴奋地看到 Next.js 如何将我的 AI 后端与动态、用户友好的前端连接起来。

如果你使用 Figma，只需上传你的 Figma 文件到 Vercel 的 v0 平台，它会自动生成一个 UI 给你。这种集成简化了流程，只需最少的努力就能将你的设计转化为功能性界面。

8、最后想法

作为一名专注于训练机器学习模型和构建多智能体应用程序的 AI 工程师，我开始欣赏干净且功能强大的用户界面的价值。除了自己的项目外，我还意识到可以通过创建 SEO 优化的着陆页来支持小型企业，从而推动他们的在线增长。

虽然 AI 和机器学习仍然是我的主要热情所在，但 Next.js 已经成为一种强大的辅助技能。我不再花几个小时从头开始编码，而是利用现有的 AI 工具在几分钟内生成网站。在 AI 的世界里，没有什么是遥不可及的；这完全取决于你的兴趣和承诺。我的建议是？不要局限于单一的技术栈，拥抱灵活性去探索和适应。

探索新技术并记住：

重点在于理解工作流以及识别其需求——而不是死记硬背语法。

原文链接：Every AI Engineer should learn Next JS.

汇智网翻译整理，转载请标明出处