东云科技官网 (DongYun Technology)

项目简介

这是一个使用 Next.js 14 App Router 构建的企业官网，支持多语言国际化，主要面向 AWS 云服务业务。

技术栈

• 前端框架: Next.js 14 (App Router)
• 语言: TypeScript
• 样式: Tailwind CSS
• UI组件: Radix UI + 自定义组件
• 国际化: react-i18next
• 状态管理: React Hooks
• 部署: Vercel / 自定义服务器

功能特性

• 🌍 多语言支持 (中文简体/繁体/英文)
• 📱 响应式设计
• ⚡ 服务端渲染 (SSR)
• 🎨 现代化UI设计
• 📄 Markdown内容支持
• 🔍 SEO优化
• 🚀 高性能优化

项目结构

dongyun/
├── app/                          # Next.js App Router
│   ├── [locale]/                 # 国际化路由
│   │   ├── layout.tsx           # 本地化布局
│   │   ├── page.tsx             # 首页
│   │   ├── about/               # 关于我们
│   │   ├── contact/             # 联系我们
│   │   ├── consultation/        # 咨询服务
│   │   ├── news/                # 新闻资讯
│   │   ├── products/            # 产品服务
│   │   └── support/             # 技术支持
│   ├── components/              # React组件
│   │   ├── ui/                  # 基础UI组件
│   │   ├── Header.tsx           # 头部组件
│   │   ├── Footer.tsx           # 底部组件
│   │   ├── Logo.tsx             # Logo组件
│   │   └── providers/           # Context提供者
│   ├── api/                     # API路由
│   ├── globals.css              # 全局样式
│   ├── favicon.ico              # 网站图标
│   ├── robots.ts                # SEO机器人配置
│   └── sitemap.ts               # 站点地图
├── lib/                         # 工具函数库
│   ├── utils.ts                 # 通用工具
│   ├── types.ts                 # TypeScript类型定义
│   ├── i18n.ts                  # 国际化配置
│   ├── cms.ts                   # 内容管理
│   ├── seo-config.ts            # SEO配置
│   └── sitemap-*.ts             # 站点地图工具
├── translations/                # 国际化文件
│   ├── zh-CN.ts                 # 中文简体
│   ├── zh-TW.ts                 # 中文繁体
│   ├── en.ts                    # 英文
│   └── */                       # 其他翻译资源
├── docs/                        # 文档资源
│   ├── zh-CN/                   # 中文文档
│   ├── zh-TW/                   # 繁体文档
│   └── en/                      # 英文文档
├── public/                      # 静态资源
├── middleware.ts                # Next.js中间件
├── tailwind.config.ts           # Tailwind配置
├── next.config.mjs              # Next.js配置
├── tsconfig.json                # TypeScript配置
└── package.json                 # 项目依赖

开发指南

环境要求

• Node.js 18+
• npm / yarn / pnpm / bun

安装依赖

npm install
# 或
yarn install
# 或
pnpm install
# 或
bun install

开发启动

npm run dev
# 或
yarn dev
# 或
pnpm dev
# 或
bun dev

访问 http://localhost:3000 查看开发环境。

构建生产版本

npm run build
npm run start

代码规范

# 代码格式化
npm run format

# 代码检查
npm run lint

国际化开发

支持的语言

• zh-CN: 中文简体 (默认)
• zh-TW: 中文繁体
• en: 英文

路由结构

/zh/         # 中文简体 (默认)
/zh-TW/      # 中文繁体
/en/         # 英文

添加新翻译

1. 在 translations/ 目录下编辑对应语言文件
2. 使用 t('key') 函数调用翻译
3. 在组件中使用 useTranslation Hook

import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation();
  
  return <h1>{t('common.title')}</h1>;
}

组件开发

UI组件

基础UI组件位于 app/components/ui/，基于 Radix UI 构建。

业务组件

业务组件位于 app/components/，包括：

• Header.tsx: 网站头部导航
• Footer.tsx: 网站底部信息
• Logo.tsx: 品牌Logo
• 各页面专用组件

添加新组件

// app/components/MyComponent.tsx
interface MyComponentProps {
  title: string;
  locale: string;
}

export default function MyComponent({ title, locale }: MyComponentProps) {
  return (
    <div>
      <h2>{title}</h2>
    </div>
  );
}

内容管理

文档内容

• 文档存放在 docs/ 目录
• 支持 Markdown 格式
• 按语言分类存储

静态资源

• 图片、字体等资源放在 public/ 目录
• 使用相对路径引用: /images/logo.png

部署

Vercel部署

1. 连接 GitHub 仓库
2. 设置环境变量
3. 自动部署

自定义服务器

# 构建
npm run build

# 启动
npm run start

Docker部署

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

性能优化

• 使用 Next.js 图片优化
• 启用 Gzip 压缩
• 代码分割和懒加载
• 静态资源缓存
• 服务端渲染优化

贡献指南

1. Fork 项目
2. 创建功能分支: git checkout -b feature/new-feature
3. 提交更改: git commit -am 'Add new feature'
4. 推送分支: git push origin feature/new-feature
5. 提交 Pull Request

许可证

本项目采用 MIT 许可证。

联系我们

• 官网: 东云科技
• 邮箱: contact@dongyun.tech
• 技术支持: support@dongyun.tech

---

Built with ❤️ by DongYun Technology Team