我为何选择 Next.js 和 AI 工具重构我的网站，而非 WordPress

我想在一个周末内重新设计我的网站，并考虑了三种可能的工具：Drupal、WordPress 和 Next.js。由于我现有的网站是基于 WordPress 构建的，它似乎是最佳选择。使用 WordPress，我无需迁移内容，服务器也已设置好，只需应用一个新主题即可。

然而，我选择了 Next.js 和 AI 工具来重新设计我的网站。原因如下。

重新设计流程

网站重新设计不仅仅是发布新版本。流程取决于项目的复杂程度和目标。有些重新设计是简单的更新，而有些则需要重建整个网站，包括其布局、设计和功能。

重新设计的关键部分可能包括：

• 创建新设计或改进现有设计
• 更改内容布局，使其更易于阅读和使用
• 通过提高网站速度和易于搜索引擎发现来改进 SEO
• 根据用户需求添加新功能
• 设置重定向，以便旧 URL 仍然有效且不影响搜索排名
• 使网站更易于访问和更快，以获得更好的用户体验
• 如果更换平台，则迁移内容或重构数据

我的重新设计项目需要解决所有这些方面。

设计挑战

我知道我缺乏设计技能。更重要的是，我不喜欢设计过程。我搜索了符合我设想的 WordPress 主题，但找不到任何。这意味着如果我继续使用 WordPress，我将不得不创建一个自定义主题或页面构建器模板。由于没有符合我需求的内容，Drupal 也面临同样的问题。

由于我不是设计师，我有两个选择：

• 使用现有主题
• 寻求帮助

我决定使用 AI 工具将我的想法变为现实。只需几个描述性提示，AI 就能从导航菜单到内容布局和响应式设计，创建了我所需的所有 UI 组件。

从后端（管理区域）来看，Drupal 和 WordPress 尚未完全支持 AI 工具来生成自定义布局，或者它们无法最佳地工作。现有选项仍然需要登录网站并反复点击多个步骤。然而，Drupal 社区正在这一领域取得重大进展，我计划很快撰写相关内容。

我选择 Next.js 的原因

我排除了 WordPress 和 Drupal，因为它们需要太多手动工作。尽管我有 Drupal 经验，但设置一个包含模块和主题的网站所需的时间比我拥有的要多。由于只有一个周末来完成项目，我需要一个简单、没有不必要复杂性的解决方案。

相反，我转向了 Next.js 和现代开发工具。Cursor 和 Windsurf，都是 IDE，通过从简单的提示生成结构化、生产就绪的代码来简化 UI 设计。你可以用简单的英语描述你想要的东西，例如“创建一个带有徽标和链接的响应式导航菜单”，然后立即获得可部署的代码。我已经在个人项目和工作中使用了这些工具相当长一段时间了。

高效的 AI 驱动开发的关键之一是精心设计提示。对于迁移过程，我提供了现有 WordPress 页面的 URL，并描述了所需的 Next.js 内容结构。通过这些详细的提示，Cursor 生成了脚本来抓取我旧网站的内容，并将其转换为新格式。同样的方法也有助于创建优化的 URL 和重定向规则，以维护 SEO 排名，同时确保整个网站的正确元数据和语义 HTML 结构。

传统上，你需要手动编写每一行代码。这些 IDE 通过简单的提示生成整个组件和页面，遵循最佳实践并保持代码质量。生成的代码可以立即部署到你的服务器。

为了简化流程，我使用了：

• ChatGPT、Gemini 和 Claude 进行头脑风暴和精心设计有效的提示
• Cursor 和 Windsurf 进行代码生成和结构化
• Tailwind CSS 进行快速样式设计和响应式设计

Tailwind 通过一致、优化的结果实现了快速的样式设计。

此外，托管在 Vercel 的免费套餐上，每月为我节省了 5 美元的托管费用，并省去了每月在 WordPress 更新和服务器维护上花费的数小时。

AI 的力量

AI 使我们能够实现以前无法实现的事情，无论是由于缺乏专业知识还是缺乏兴趣。

我决定的另一个主要因素是速度。

正如最后的性能测试所示，我的旧 WordPress 网站在移动设备上的 PageSpeed Insights 得分仅为 65：

相比之下：

• Next.js 速度极快，在移动和桌面设备的 PageSpeed 上均获得 100 分
• 仅通过几个精心设计的提示和几分钟的时间就实现了这一目标

拥抱 AI 同时保持控制

AI 通过大幅提高生产力正在彻底改变软件开发。它使开发人员能够完成以前需要整个团队才能完成的任务，或者由于时间限制、缺乏专业知识或对某些开发方面缺乏兴趣而似乎遥不可及的任务。

然而，重要的是要理解 AI 是一个强大的助手，而不是基础知识和批判性思维的替代品。以下是我获得的一些关键见解：

• 学习基础知识比以往任何时候都更重要。你需要了解 AI 在做什么以及为什么
• 将自己定位为驾驶员，AI 作为你的助手处理重复性和手动任务
• 将精力集中在挑战性方面：理解用户需求、系统设计、架构决策和解决问题
• 在 AI 时代，强大的沟通技巧（如积极倾听）变得更加重要

关键在于拥抱 AI，同时保持对开发过程的控制。这意味着要彻底审查生成的代码，理解其含义，并确保它符合你的项目需求和最佳实践。

在我的例子中，AI 使我能够通过几个精心设计的提示将我的想法变为现实。它帮助我快速迭代、实验和改进，直到我得到我喜欢的结果，所有这些都大大降低了时间成本。

虽然我确实喜欢 Drupal 和 WordPress，并且它们是许多我将继续使用的用例的优秀工具，但对于这个特定的项目而言，AI 驱动的 Next.js 开发被证明是完美的解决方案。

技术栈

这是我用来构建此网站的完整技术栈：