项目结构
了解 NEXTDEVKIT 的模块化架构和目录组织
📁 根目录结构
nextdevkit/
├── src/
│ ├── app/ # Next.js App Router 页面
│ ├── components/ # React 组件
│ ├── config/ # 配置文件
│ ├── database/ # 数据库架构和客户端
│ ├── i18n/ # 国际化
│ ├── lib/ # 核心工具和逻辑
│ ├── mail/ # 邮件模板和提供商
│ ├── payment/ # 支付处理
│ ├── storage/ # 文件存储提供商
│ ├── styles/ # 全局样式
│ └── middleware.ts # 路由保护和重定向
├── content/ # MDX 内容(博客、文档、法律)
├── drizzle/ # 数据库迁移
├── public/ # 静态资源
├── messages/ # 国际化消息
├── drizzle.config.ts # Drizzle ORM 配置
├── next.config.ts # Next.js 配置
├── source.config.ts # Fumadocs 配置
└── package.json # 依赖和脚本
🔑 关键文件
文件 | 用途 |
---|---|
src/middleware.ts | 路由保护、重定向和国际化 |
drizzle.config.ts | 数据库操作的 Drizzle ORM 配置 |
next.config.ts | Next.js 配置,包括重定向和重写 |
source.config.ts | 文档的 Fumadocs 配置 |
open-next.config.ts | Cloudflare 部署的 OpenNext 配置 |
biome.json | 代码检查和格式化的 Biome 配置 |
components.json | shadcn/ui 组件配置 |
📂 关键目录
/src/app
目录
app 目录遵循 Next.js App Router 约定,包含国际化路由:
app/
├── (app)/ # 需要认证的应用路由
│ ├── app/ # 主应用程序
│ │ ├── ai/ # AI 功能演示(聊天、图像、语音)
│ │ ├── dashboard/ # 用户仪表板
│ │ └── settings/ # 用户设置
│ └── auth/ # 认证页面
├── [locale]/ # 国际化路由
│ ├── (marketing)/ # 营销页面
│ │ ├── blog/ # 博客系统
│ │ ├── contact/ # 联系表单
│ │ ├── legal/ # 法律页面
│ │ └── pricing/ # 价格页面
│ └── docs/ # 文档
├── api/ # API 路由
│ ├── auth/ # 认证 API
│ ├── docs-search/ # 文档搜索
│ └── webhooks/ # Webhook 处理器
├── image-proxy/ # 图像优化代理
├── globals.css # 全局样式
├── layout.tsx # 根布局
├── not-found.tsx # 404 页面
├── robots.ts # SEO robots 配置
└── sitemap.ts # 动态站点地图生成
/src/lib
目录
核心应用逻辑和工具:
lib/
├── actions/ # 服务器操作
│ └── send-contact-email.ts
├── auth/ # 认证工具
│ ├── api.ts
│ ├── client.ts
│ ├── server.ts
│ └── session-context.ts
├── hooks/ # 自定义 React Hooks
│ ├── use-mobile.ts
│ ├── use-session.ts
│ └── use-payment.ts
├── stores/ # 状态管理
│ ├── use-locale-store.ts
│ └── use-payment-store.ts
├── auth.ts # 认证配置
├── metadata.ts # SEO 元数据工具
├── safe-action.ts # 安全操作配置
├── source.ts # Fumadocs 源配置
├── toc.ts # 目录工具
├── urls.ts # URL 工具
├── utils.ts # 通用工具
└── i18n.ts # 国际化工具
/src/config
目录
不同功能的配置文件:
config/
├── marketing/ # 营销配置
│ ├── blog.ts
│ ├── faq.ts
│ ├── feature-tabs.ts
│ ├── hero-section.ts
│ ├── pricing.ts
│ └── testimonials.ts
├── analytics.ts # 分析配置
├── footer.ts # 页脚配置
├── index.ts # 主应用配置
├── navigation.ts # 导航配置
├── oauth-provider.ts # OAuth 提供商配置
├── settings-tabs.tsx # 设置选项卡配置
├── sidebar.tsx # 侧边栏配置
├── social-media.tsx # 社交媒体配置
└── types.ts # TypeScript 类型定义
🎉 下一步
现在您了解了项目结构:
- 🔧 设置您的 IDE,安装推荐的扩展
- 📝 学习格式化规则使用 Biome
- 🔄 了解更新过程保持最新
- 🛠️ 开始构建按照模式构建您的功能
模块化架构使得添加新功能、自定义现有功能和在项目增长时保持代码质量变得容易!🚀