智之信使官网

基于 Next.js + TypeScript + Tailwind CSS 的现代化企业官网，针对 SEO 优化。

项目特点

• ✅ SEO 优化 - 服务端渲染(SSR)和静态生成(SSG)
• ✅ 现代设计 - 极简风格，参考蝴蝶效应官网
• ✅ 响应式设计 - 完美适配移动设备
• ✅ 高性能 - 自动代码分割和图片优化
• ✅ 易于维护 - TypeScript + 清晰的项目结构

项目结构

├── app/                    # Next.js App Router
│   ├── layout.tsx         # 全局布局和 SEO 设置
│   ├── page.tsx           # 首页
│   ├── products/          # 产品页面
│   ├── contact/           # 联系页面
│   ├── globals.css        # 全局样式
│   ├── sitemap.ts         # Sitemap 配置
│   └── robots.ts          # Robots 配置
├── components/            # React 组件
│   ├── Header.tsx         # 导航栏
│   ├── Hero.tsx           # 英雄板块
│   ├── Products.tsx       # 产品列表
│   ├── Features.tsx       # 功能特性
│   ├── CTA.tsx            # 行动号召
│   ├── ProductDetail.tsx  # 产品详情
│   ├── Contact.tsx        # 联系表单
│   └── Footer.tsx         # 页脚
├── public/                # 静态资源
├── package.json           # 项目依赖
├── tsconfig.json          # TypeScript 配置
├── tailwind.config.ts     # Tailwind 配置
└── next.config.ts         # Next.js 配置

快速开始

1. 安装依赖

npm install

2. 开发模式

npm run dev

访问 http://localhost:3000

3. 生产构建

npm run build
npm start

4. 代码检查

npm run lint

SEO 优化配置

1. 元数据优化

所有页面都配置了完整的元数据：

• 页面标题和描述
• Open Graph 标签
• 规范 URL
• 机器人元标签

2. Sitemap 和 Robots

• app/sitemap.ts - 自动生成 sitemap
• app/robots.ts - 配置搜索引擎爬虫规则
• public/robots.txt - 备用 robots.txt

3. 性能优化

• 服务端渲染(SSR)确保完整 HTML 被爬虫索引
• 自动代码分割和压缩
• 图片自动优化
• 字体预加载

自定义配置

更新域名

1. 编辑 app/layout.tsx 中的 openGraph.url
2. 编辑 app/layout.tsx 中的 alternates.canonical
3. 编辑 app/sitemap.ts 中的 baseUrl
4. 更新 public/robots.txt 中的 Sitemap URL

添加分析

在 .env.local 中添加：

NEXT_PUBLIC_GA_ID=你的Google Analytics ID

然后在 app/layout.tsx 中集成 Google Analytics。

添加联系表单后端

在 components/Contact.tsx 的 handleSubmit 函数中添加 API 调用来处理表单提交。

部署

Vercel (推荐)

npm install -g vercel
vercel

其他平台

该项目支持部署到任何支持 Node.js 的平台：

• Docker
• AWS
• Google Cloud
• 阿里云
• 腾讯云等

技术栈

• 框架: Next.js 15
• 语言: TypeScript
• 样式: Tailwind CSS
• 字体: Google Fonts (Geist)
• 代码检查: ESLint

许可证

MIT License

联系方式

• 邮箱: contact@zhizhixinshi.com
• 官网: https://yourwebsite.com