gxwebsoft
/
next-10398
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
使用nextjs构建的前端应用
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
12 Commits
1 Branch
0 Tags
476 KiB
 
 
Branch: master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
next-10398/README.md

7.8 KiB
Raw Permalink Blame History

WEBSOFT 企业官网

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

Next.js TypeScript Tailwind CSS React

🌟 项目特色

  • 🚀 现代化技术栈 - 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

后端集成

📁 项目结构

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 文件了解详情

📞 联系我们

🙏 致谢

感谢以下开源项目：

WEBSOFT - 构建现代Web应用 🚀