Logo文档

项目结构

了解 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.tsNext.js 配置,包括重定向和重写
source.config.ts文档的 Fumadocs 配置
open-next.config.tsCloudflare 部署的 OpenNext 配置
biome.json代码检查和格式化的 Biome 配置
components.jsonshadcn/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 类型定义

🎉 下一步

现在您了解了项目结构:

  1. 🔧 设置您的 IDE,安装推荐的扩展
  2. 📝 学习格式化规则使用 Biome
  3. 🔄 了解更新过程保持最新
  4. 🛠️ 开始构建按照模式构建您的功能

模块化架构使得添加新功能、自定义现有功能和在项目增长时保持代码质量变得容易!🚀