You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- Update folder-structure.mdx and zh-CN version to reflect current Next.js 13+ App Router architecture
- Replace outdated simple desktop/mobile structure with actual complex structure
- Add documentation for (backend), [variants], @modal, and desktop route groups
- Include API architecture explanation with tRPC and REST endpoints
- Document platform organization and deployment targets
Fixeslobehub#9522
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com>
Co-authored-by: Arvin Xu <[email protected]>
├── services # Encapsulated backend service interfaces, such as HTTP requests
16
17
├── store # Zustand store for state management
18
+
├── styles # Global styles and CSS-in-JS configurations
17
19
├── types # TypeScript type definition files
18
20
└── utils # Common utility functions
19
21
```
20
22
21
23
## app
22
24
23
-
In the `app`folder, we organize each route page according to the app router's [Route Groups](https://nextjs.org/docs/app/building-your-application/routing/route-groups) to separately handle the implementation of desktop and mobile code. Taking the file structure of the `welcome` page as an example:
25
+
The `app`directory follows Next.js 13+ App Router conventions with a sophisticated architecture using [Route Groups](https://nextjs.org/docs/app/building-your-application/routing/route-groups) to organize backend services, platform variants, and application routes:
├── features # This folder contains features code shared by both desktop and mobile, such as the Banner component
36
-
│ └── Banner
37
-
└── page.tsx # This is the main entry file for the page, used to load desktop or mobile code based on the device type
28
+
app
29
+
├── (backend)/ # Backend API routes and services
30
+
│ ├── api/ # REST API endpoints
31
+
│ │ ├── auth/ # Authentication routes
32
+
│ │ └── webhooks/ # Webhook handlers
33
+
│ ├── middleware/ # Request middleware
34
+
│ ├── oidc/ # OpenID Connect routes
35
+
│ ├── trpc/ # tRPC API endpoints
36
+
│ │ ├── async/ # Async tRPC routes
37
+
│ │ ├── desktop/ # Desktop-specific tRPC routes
38
+
│ │ ├── edge/ # Edge runtime tRPC routes
39
+
│ │ ├── lambda/ # Lambda tRPC routes
40
+
│ │ └── tools/ # Tools tRPC routes
41
+
│ └── webapi/ # Web API endpoints
42
+
│ ├── chat/ # Chat-related APIs
43
+
│ ├── models/ # Model management APIs
44
+
│ ├── tts/ # Text-to-speech APIs
45
+
│ └── ...
46
+
├── [variants]/ # Platform and device variants
47
+
│ ├── (auth)/ # Authentication pages
48
+
│ │ ├── login/
49
+
│ │ ├── signup/
50
+
│ │ └── next-auth/
51
+
│ ├── (main)/ # Main application routes
52
+
│ │ ├── (mobile)/ # Mobile-specific routes
53
+
│ │ │ └── me/ # Mobile profile pages
54
+
│ │ ├── _layout/ # Layout components
55
+
│ │ ├── chat/ # Chat interface
56
+
│ │ ├── discover/ # Discovery pages
57
+
│ │ ├── files/ # File management
58
+
│ │ ├── image/ # Image generation
59
+
│ │ ├── profile/ # User profile
60
+
│ │ ├── repos/ # Repository management
61
+
│ │ └── settings/ # Application settings
62
+
│ └── @modal/ # Parallel modal routes
63
+
│ ├── (.)changelog/
64
+
│ └── _layout/
65
+
├── desktop/ # Desktop-specific routes
66
+
│ └── devtools/
67
+
├── manifest.ts # PWA manifest
68
+
├── robots.tsx # Robots.txt generation
69
+
├── sitemap.tsx # Sitemap generation
70
+
└── sw.ts # Service worker
38
71
```
39
72
40
-
In this way, we can clearly distinguish and manage desktop and mobile code, while also easily reusing code required on both devices, thereby improving development efficiency and maintaining code cleanliness and maintainability.
73
+
### Architecture Explanation
74
+
75
+
**Route Groups:**
76
+
-`(backend)` - Contains all server-side API routes, middleware, and backend services
77
+
-`[variants]` - Dynamic route group handling different platform variants and main application pages
78
+
-`@modal` - Parallel routes for modal dialogs using Next.js parallel routing
79
+
80
+
**Platform Organization:**
81
+
- The architecture supports multiple platforms (web, desktop, mobile) through route organization
82
+
- Desktop-specific routes are in the `desktop/` directory
83
+
- Mobile-specific routes are organized under `(main)/(mobile)/`
84
+
- Shared layouts and components are in `_layout/` directories
85
+
86
+
**API Architecture:**
87
+
- REST APIs in `(backend)/api/` and `(backend)/webapi/`
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?v=4&size=40){kind=avatar}
0 commit comments