CloudPro 云服务器代理商网站（Next.js 14 + TailwindCSS）

本项目是基于 Next.js App Router 搭建的多语言营销网站模板，集成 TailwindCSS、React Markdown 渲染、Prism 代码高亮与基础 SEO。支持静态导出，适合部署到任意静态主机（如 OSS、GitHub Pages、Vercel 静态托管等）。

技术栈

• Next.js 14（App Router）
• React 18、TypeScript
• TailwindCSS + tailwindcss-animate
• lucide-react 图标
• react-markdown + remark-gfm（Markdown 渲染/表格/任务列表）
• react-syntax-highlighter（Prism 主题：tomorrow）

主要特性

• 多语言 UI：简体中文（zh）、繁体中文（zh-tw）、英文（en），根据浏览器语言自动切换
• 资讯中心：分类筛选、阅读时间展示；详情页支持 Markdown 内容与代码高亮
• 产品/解决方案/支持/联系等页面的营销内容结构
• 基础 SEO：客户端 Head 组件动态设置标题、描述、关键词与 OpenGraph/Twitter 标签
• robots 与 sitemap：基于 app/robots.ts 与 app/sitemap.ts 生成（支持静态导出）
• 静态导出（next export）：next.config.mjs 已设置 output: 'export' 与 trailingSlash: true

目录结构（摘）

• app/：App Router 页面
  • page.tsx：首页
  • news/：资讯列表与详情页（[slug]/page.tsx）
  • products/：产品页与子页面（ECS/OSS/RDS/SLB）
  • solutions/、support/、contact/
  • robots.ts、sitemap.ts：生成 robots 与 sitemap
• components/：导航、页脚、横幅、Head 等 UI 组件
• content/：Markdown 内容目录（例如 content/cloud-security-best-practices/zh.md）
• public/：静态资源

环境变量

• NEXT_PUBLIC_BASE_URL：站点基础 URL，用于 app/robots.ts 与 app/sitemap.ts

示例（PowerShell）：

Copy-Item .env.example .env -ErrorAction SilentlyContinue
# 在 .env 中设置：
# NEXT_PUBLIC_BASE_URL=https://your-domain.com

本地开发

# 安装依赖
npm install

# 启动开发服务器（默认 http://localhost:3000）
npm run dev

代码质量

# 代码格式化
npm run format

# 代码检查
npm run lint

构建与导出

项目已配置为静态导出模式：

# 生产构建（生成 .next）
npm run build

# 静态导出（生成 .\out 目录）
npm run export

将 out/ 目录上传到任意静态托管即可上线。若本地预览导出结果：

npx serve .\out

说明：由于使用 output: 'export'，推荐通过 npm run export 获取静态产物目录进行部署；npm run start 适用于 SSR 场景，通常无需在本模板中使用。

内容与路由

• 新增资讯详情页内容：在 content/<slug>/ 下放置 zh.md / zh-tw.md / en.md
• app/sitemap.ts 会扫描 content/ 目录下的文件夹生成 /news/<slug> 动态路由至站点地图
• 若要在资讯列表页展示新文章，请在 app/news/page.tsx 的 newsData 中补充对应项

UI 组件

• components/Head/Head.tsx：在客户端动态设置 meta（标题/描述/关键词/OG/Twitter）
• components/Navigation/*：导航栏、移动端菜单、下拉菜单
• components/Banner/HeroBanner.tsx：首页横幅/轮播与 CTA
• components/Footer/Footer.tsx：页脚与回到顶部按钮

Tailwind 配置

• tailwind.config.ts 已启用 darkMode: ['class'] 与 tailwindcss-animate
• 内容扫描路径包含 app/、components/、pages/

注意事项

• 若同时存在 public/robots.txt 与 app/robots.ts，以 app/robots.ts 生成的为准（静态导出会产出 robots.txt 与 sitemap.xml）。
• 本项目为前端模板，联系表单当前为前端演示（console + alert），需要接入后端或第三方服务时请自行扩展。

可用脚本

{
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint",
  "format": "prettier --write .",
  "export": "next build && next export"
}

---

在 Onlook 或浏览器中打开 http://localhost:3000 查看效果。