WEBSOFT 企业官网

基于 Next.js 15 + TypeScript 构建的现代化企业官网系统，集成 CMS 内容管理功能

🌟 项目特色

• 🚀 现代化技术栈 - Next.js 15 + React 19 + TypeScript + Tailwind CSS v4
• 📱 响应式设计 - 完美适配桌面、平板、手机等各种设备
• 🎨 精美UI界面 - 现代化设计风格，用户体验优秀
• ⚡ 高性能优化 - SSR/SSG、图片优化、代码分割等性能优化
• 🔧 CMS集成 - 与后端CMS系统深度集成，内容动态管理
• 🌐 多语言支持 - 支持中英文切换，国际化友好
• 📊 SEO优化 - 动态metadata、结构化数据、搜索引擎友好
• 🔐 类型安全 - 完整的TypeScript类型定义，开发更安全

🏗️ 技术架构

前端技术栈

• 框架: Next.js 15 (App Router)
• 语言: TypeScript 5.0
• UI库: React 19
• 样式: Tailwind CSS v4
• 构建工具: Turbopack (开发环境)
• 代码规范: ESLint + Prettier

后端集成

• API服务: https://cms-api.websoft.top/api
• 内容管理: CMS系统集成
• 文件存储: OSS对象存储
• 多租户: 支持多租户架构

📁 项目结构

next-10398/
├── src/
│   ├── app/                    # Next.js App Router 页面
│   │   ├── layout.tsx         # 根布局组件
│   │   ├── page.tsx           # 首页
│   │   ├── globals.css        # 全局样式
│   │   └── ...
│   ├── components/            # React 组件
│   │   ├── layout/           # 布局组件
│   │   │   ├── Header.tsx    # 头部导航
│   │   │   └── Footer.tsx    # 底部信息
│   │   └── sections/         # 页面区块组件
│   │       ├── HeroSection.tsx      # 英雄区域
│   │       ├── FeaturesSection.tsx  # 产品服务
│   │       ├── CasesSection.tsx     # 客户案例
│   │       ├── PartnersSection.tsx  # 合作伙伴
│   │       └── ContactSection.tsx   # 联系我们
│   ├── api/                   # API 接口封装
│   │   ├── cms/              # CMS相关API
│   │   ├── system/           # 系统管理API
│   │   ├── layout/           # 布局相关API
│   │   └── modules/          # 业务模块API
│   ├── config/               # 配置文件
│   │   └── setting.ts        # 系统配置
│   └── utils/                # 工具函数
│       ├── request.ts        # HTTP请求封装
│       ├── common.ts         # 通用工具
│       └── token-util.ts     # Token管理
├── public/                   # 静态资源
├── docs/                     # 项目文档
├── package.json             # 项目依赖
├── next.config.ts           # Next.js配置
├── tailwind.config.js       # Tailwind配置
├── tsconfig.json           # TypeScript配置
└── README.md               # 项目说明

🚀 快速开始

环境要求

• Node.js 18.0 或更高版本
• npm 9.0 或更高版本

安装依赖

# 克隆项目
git clone <repository-url>
cd next-10398

# 安装依赖
npm install

环境配置

创建 .env.local 文件：

# API 配置
NEXT_PUBLIC_API_URL=https://cms-api.websoft.top/api
NEXT_PUBLIC_UPLOAD_URL=https://cms-api.websoft.top/api/upload

# 租户配置
NEXT_PUBLIC_TENANT_ID=10398

# 其他配置
NODE_ENV=development

启动开发服务器

# 启动开发服务器 (使用 Turbopack)
npm run dev

# 或使用其他包管理器
yarn dev
pnpm dev
bun dev

打开 http://localhost:3000 查看网站效果。

构建生产版本

# 构建生产版本
npm run build

# 启动生产服务器
npm run start

🎨 页面功能

首页模块

1. Hero区域 - 主视觉展示，包含主标题、技术标签和服务图标
2. 产品服务 - 四大核心服务展示（全栈开发、企业应用、移动开发、云服务）
3. 客户案例 - 8个精选案例展示，支持分类和链接跳转
4. 合作伙伴 - 知名企业合作伙伴展示
5. 联系我们 - 联系方式和公司信息展示

响应式设计

• 桌面端: 1200px+ 多列布局，完整功能展示
• 平板端: 768px-1199px 适配布局，保持良好体验
• 移动端: <768px 单列布局，触摸友好

🔧 核心功能

动态内容管理

• 网站信息: 从CMS系统动态获取网站基本信息
• 导航菜单: 支持多级导航，动态配置
• 页面内容: 所有内容支持后台管理和实时更新
• 多语言: 支持中英文内容切换

SEO优化

• 动态Metadata: 根据CMS数据生成页面标题、描述、关键词
• 结构化数据: 支持搜索引擎结构化数据
• 图片优化: 自动图片压缩和懒加载
• 性能优化: SSR/SSG、代码分割、缓存策略

API集成

• 统一封装: 完整的API请求封装，支持类型安全
• 错误处理: 统一的错误处理机制
• 认证管理: 自动token管理和刷新
• 多租户: 支持多租户架构

🛠️ 开发指南

添加新页面

// src/app/new-page/page.tsx
export default function NewPage() {
  return (
    <div>
      <h1>新页面</h1>
    </div>
  );
}

创建新组件

// src/components/NewComponent.tsx
interface NewComponentProps {
  title: string;
  content: string;
}

export default function NewComponent({ title, content }: NewComponentProps) {
  return (
    <div className="p-4">
      <h2 className="text-xl font-bold">{title}</h2>
      <p>{content}</p>
    </div>
  );
}

API调用示例

// 获取网站信息
import { getSiteInfo } from '@/api/layout';

const siteInfo = await getSiteInfo();
console.log(siteInfo.websiteName);

// 使用现代化API
import { request } from '@/api';

const result = await request.get('/cms/article/list', {
  page: 1,
  limit: 10
});

📱 部署指南

Vercel 部署 (推荐)

1. 将代码推送到 GitHub
2. 在 Vercel 导入项目
3. 配置环境变量
4. 自动部署完成

其他平台部署

# 构建静态文件
npm run build

# 部署 .next 目录到服务器

🔍 性能优化

• 图片优化: Next.js Image组件自动优化
• 代码分割: 自动按路由分割代码
• 缓存策略: 合理的缓存配置
• CDN加速: 静态资源CDN分发
• 懒加载: 图片和组件懒加载

🤝 贡献指南

1. Fork 项目
2. 创建功能分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 创建 Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情

📞 联系我们

• 官网: https://websoft.top
• 邮箱: contact@websoft.top
• 电话: 0771-5386339
• 地址: 广西南宁市

🙏 致谢

感谢以下开源项目：

• Next.js - React 全栈框架
• Tailwind CSS - 实用优先的CSS框架
• TypeScript - JavaScript的超集
• React - 用户界面库

---

WEBSOFT - 构建现代Web应用 🚀