{"id":30446982,"url":"https://github.com/tencentedgeone/next-app-router-template","last_synced_at":"2025-08-23T11:21:10.290Z","repository":{"id":311131743,"uuid":"1042448427","full_name":"TencentEdgeOne/next-app-router-template","owner":"TencentEdgeOne","description":"An interactive demonstration project showcasing Next.js 15 App Router core features, including layout systems, file conventions, and routing functionality with complete examples.","archived":false,"fork":false,"pushed_at":"2025-08-22T09:02:19.000Z","size":119,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-22T10:40:50.587Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TencentEdgeOne.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-22T03:22:42.000Z","updated_at":"2025-08-22T09:02:22.000Z","dependencies_parsed_at":"2025-08-22T10:40:56.473Z","dependency_job_id":"6e8bfbf0-930c-44d3-ab1b-a39af590d999","html_url":"https://github.com/TencentEdgeOne/next-app-router-template","commit_stats":null,"previous_names":["tencentedgeone/next-app-router-template"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/TencentEdgeOne/next-app-router-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TencentEdgeOne%2Fnext-app-router-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TencentEdgeOne%2Fnext-app-router-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TencentEdgeOne%2Fnext-app-router-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TencentEdgeOne%2Fnext-app-router-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TencentEdgeOne","download_url":"https://codeload.github.com/TencentEdgeOne/next-app-router-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TencentEdgeOne%2Fnext-app-router-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271746793,"owners_count":24813586,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-23T02:00:09.327Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-08-23T11:21:07.207Z","updated_at":"2025-08-23T11:21:10.281Z","avatar_url":"https://github.com/TencentEdgeOne.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next.js App Router Demo Project\n\nAn interactive demonstration project showcasing Next.js 15 App Router core features, including layout systems, file conventions, and routing functionality with complete examples.\n\n## 🚀 Project Features\n\n### Core Features\n- **Nested Layouts** - Nested layout system demonstration\n- **Route Groups** - Route grouping functionality showcase\n- **Parallel Routes** - Parallel routing feature implementation\n- **File Conventions** - Complete file convention examples\n  - `loading.js` - Loading state management\n  - `error.js` - Error boundary handling\n  - `not-found.js` - 404 page customization\n\n### Tech Stack\n- **Next.js 15.5.0** - Latest version of App Router\n- **TypeScript** - Complete type support\n- **Tailwind CSS v4** - Modern styling system\n- **shadcn/ui** - High-quality UI component library\n- **Lucide React** - Beautiful icon library\n\n## 📁 Project Structure\n\n```\napp-router-template/\n├── src/\n│   ├── app/\n│   │   ├── globals.css              # Global styles and theme\n│   │   ├── layout.tsx               # Root layout\n│   │   ├── page.tsx                 # Home page\n│   │   ├── components/\n│   │   │   └── Header.tsx          # Shared navigation component\n│   │   ├── layouts/                 # Layout system demonstration\n│   │   │   ├── nested-layouts/     # Nested layouts\n│   │   │   │   ├── layout.tsx      # Outer layout\n│   │   │   │   ├── page.tsx        # Home page\n│   │   │   │   ├── dashboard/      # Dashboard page\n│   │   │   │   ├── settings/       # Settings page (with inner layout)\n│   │   │   │   └── profile/        # Profile page\n│   │   │   ├── route-groups/       # Route groups\n│   │   │   │   ├── page.tsx        # Demo page\n│   │   │   │   ├── (admin)/        # Admin group\n│   │   │   │   ├── (user)/         # User group\n│   │   │   │   └── (public)/       # Public group\n│   │   │   └── parallel-routes/    # Parallel routes\n│   │   │       ├── layout.tsx      # Parallel routes layout\n│   │   │       ├── @messages/      # Messages slot\n│   │   │       ├── @users/         # Users slot\n│   │   │       └── @settings/      # Settings slot\n│   │   └── file-conventions/       # File conventions demonstration\n│   │       ├── loading/            # Loading states\n│   │       │   ├── page.tsx        # Introduction page\n│   │       │   ├── loading.js      # Loading component\n│   │       │   └── demo/           # Demo page\n│   │       ├── error/              # Error handling\n│   │       │   ├── page.tsx        # Introduction page\n│   │       │   ├── error.js        # Error boundary\n│   │       │   └── demo/           # Demo page\n│   │       └── not-found/          # 404 page\n│   │           ├── page.tsx        # Introduction page\n│   │           ├── not-found.js    # 404 component\n│   │           └── demo/           # Demo page\n│   └── components/\n│       └── ui/                     # shadcn/ui components\n├── public/                          # Static assets\n├── package.json                     # Project dependencies\n├── next.config.ts                   # Next.js configuration\n├── tailwind.config.ts               # Tailwind configuration\n└── tsconfig.json                    # TypeScript configuration\n```\n\n## 🎨 Design Theme\n\nThe project adopts a modern dark theme design:\n\n- **Primary Color**: `#1c66e5` (Blue)\n- **Background**: `#0a0a0a` (Dark black)\n- **Foreground**: `#ffffff` (White)\n- **Card**: `#1a1a1a` (Dark gray)\n- **Border**: `rgba(255, 255, 255, 0.1)` (Semi-transparent white)\n\n## 🛠️ Quick Start\n\n### Requirements\n- Node.js 18.17 or higher\n- npm or yarn package manager\n\n### Install Dependencies\n```bash\nnpm install\n```\n\n### Start Development Server\n```bash\nedgeone pages dev\n```\n\nThe project will start at [http://localhost:8088](http://localhost:8088)\n\n\n## 📚 Feature Demonstrations\n\n### 1. Nested Layouts\n**Path**: `/layouts/nested-layouts`\n\nDemonstrates a true nested layout system:\n- Outer layout provides shared navigation and title\n- Inner layout (settings page) provides sidebar\n- Layout state persists during page transitions\n- Supports multi-level nesting and independent rendering\n\n**Features**:\n- Layout persistence\n- Shared components\n- Multi-level nesting\n- Performance optimization\n\n### 2. Route Groups\n**Path**: `/layouts/route-groups`\n\nShowcases route grouping functionality:\n- Uses `(folderName)` convention to create logical groups\n- Doesn't affect URL path structure\n- Applies different layouts to different route segments\n- Supports admin, user, public, and other groups\n\n**Group Structure**:\n- `(admin)` - Admin backend pages\n- `(user)` - User-related pages  \n- `(public)` - Public pages\n\n### 3. Parallel Routes\n**Path**: `/layouts/parallel-routes`\n\nImplements true parallel routing features:\n- Uses `@folder` convention to create slots\n- Renders multiple independent route segments simultaneously\n- Each slot maintains independent state\n- Supports conditional rendering and default slots\n\n**Slot Components**:\n- `@messages` - Message list\n- `@users` - User management\n- `@settings` - Application settings\n- `@default` - Default content\n\n### 4. File Conventions\n\n#### Loading UI (`loading.js`)\n**Path**: `/file-conventions/loading`\n\n- Automatically displays loading states\n- Supports nesting and inheritance\n- Doesn't affect SEO and performance\n- Real demonstration of async component loading\n\n#### Error UI (`error.js`)\n**Path**: `/file-conventions/error`\n\n- Automatically captures component errors\n- Graceful degradation handling\n- Provides error recovery mechanisms\n- Prevents application crashes\n\n#### Not Found UI (`not-found.js`)\n**Path**: `/file-conventions/not-found`\n\n- Custom 404 pages\n- Supports `notFound()` function calls\n- Maintains complete application structure\n- User-friendly guidance\n\n## 🔧 Technical Implementation\n\n### Layout System\n- **Outer Layout**: Provides shared navigation and title\n- **Inner Layout**: Provides additional layout for specific page segments\n- **Layout Inheritance**: Supports multi-level nesting and state persistence\n- **Performance Optimization**: Only re-renders changed parts\n\n### Route Management\n- **File System Routing**: Automatic routing based on file structure\n- **Dynamic Routing**: Supports parameters and query strings\n- **Middleware Support**: Route-level logic processing\n- **SEO Optimization**: Server-side rendering and metadata management\n\n### State Management\n- **Layout State**: Persists during page transitions\n- **Component State**: Managed using React Hooks\n- **Server State**: Supports async data fetching\n- **Client State**: Interactions and user input\n\n## 📖 Learning Resources\n\n### Official Documentation\n- [Next.js App Router](https://nextjs.org/docs/app)\n- [Layouts](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts)\n- [File Conventions](https://nextjs.org/docs/app/building-your-application/routing/file-conventions)\n- [Parallel Routes](https://nextjs.org/docs/app/building-your-application/routing/parallel-routes)\n- [Route Groups](https://nextjs.org/docs/app/building-your-application/routing/route-groups)\n\n### Related Technologies\n- [React 18](https://react.dev/)\n- [TypeScript](https://www.typescriptlang.org/)\n- [Tailwind CSS](https://tailwindcss.com/)\n- [shadcn/ui](https://ui.shadcn.com/)\n\n## 🤝 Contributing\n\nWelcome to submit Issues and Pull Requests to improve this project!\n\n### Development Standards\n- Write code using TypeScript\n- Follow ESLint rules\n- Keep component structure clear\n- Add appropriate comments and documentation\n\n### Commit Standards\n- Use clear commit messages\n- One commit for one thing\n- Test to ensure functionality works\n- Update related documentation\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## Deployment\n[![Deploy with EdgeOne Pages](https://cdnstatic.tencentcs.com/edgeone/pages/deploy.svg)](https://edgeone.ai/pages/new?from=github\u0026template=express-template)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftencentedgeone%2Fnext-app-router-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftencentedgeone%2Fnext-app-router-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftencentedgeone%2Fnext-app-router-template/lists"}