返回博客
Next.jsTailwind建站
用 Next.js + AI 搭建专业网站：实战步骤清单
从 create-next-app 到 Tailwind、shadcn、部署 Vercel，配合 Cursor 快速搭建现代化网站。
2026年5月12日约 2 分钟阅读
Next.js 是 AI 编程时代最受欢迎的网站框架：SEO 友好、部署简单、生态成熟。
技术栈组合
- Next.js 16 — App Router
- Tailwind CSS — 快速 UI
- shadcn/ui — 可定制组件
- Supabase — 登录与数据库
- Stripe — 支付
这套组合正是 码灵犀 教程的主线。
让 AI 帮你初始化的 prompt 示例
用 create-next-app 创建 TypeScript + Tailwind 项目，
添加 shadcn button/card，做一个 Hero + 三列价格卡片的首页，
主色 indigo，支持暗色模式。
目录结构建议
src/app/ # 页面路由
src/components/ # UI 组件
content/docs/ # 教程 Markdown
content/blog/ # 博客 Markdown
部署
推送到 GitHub 后连接 Vercel，每次 push 自动预览与生产部署。详见 Vercel 部署指南。