84 lines
2.5 KiB
Markdown
84 lines
2.5 KiB
Markdown
# Add Route Command
|
|
|
|
You are helping the user add a new route to their frontend application following Sngular's routing best practices.
|
|
|
|
## Instructions
|
|
|
|
1. **Detect the framework and routing setup**:
|
|
- Next.js (App Router or Pages Router)
|
|
- React Router
|
|
- Vue Router
|
|
- Other routing solution
|
|
|
|
2. **Ask for route details**:
|
|
- Route path (e.g., `/dashboard`, `/users/:id`)
|
|
- Route name/title
|
|
- Whether it requires authentication
|
|
- Parent route (if nested)
|
|
- Any route parameters or query params
|
|
|
|
3. **Determine route type**:
|
|
- Public route
|
|
- Protected route (requires authentication)
|
|
- Nested route
|
|
- Dynamic route with parameters
|
|
- Layout route
|
|
|
|
## Implementation Tasks
|
|
|
|
### For Next.js App Router:
|
|
1. Create the route directory structure: `app/[route-path]/page.tsx`
|
|
2. Add layout if needed: `app/[route-path]/layout.tsx`
|
|
3. Add loading state: `app/[route-path]/loading.tsx`
|
|
4. Add error boundary: `app/[route-path]/error.tsx`
|
|
5. Add metadata for SEO
|
|
6. Implement the page component
|
|
|
|
### For Next.js Pages Router:
|
|
1. Create page file in `pages/` directory
|
|
2. Add getServerSideProps or getStaticProps if needed
|
|
3. Configure route in middleware for protection
|
|
|
|
### For React Router:
|
|
1. Create the page component
|
|
2. Add route configuration in router setup
|
|
3. Add route to navigation
|
|
4. Set up protected route wrapper if needed
|
|
|
|
### For Vue Router:
|
|
1. Create the view component
|
|
2. Add route configuration in `router/index.ts`
|
|
3. Add route guards if authentication required
|
|
4. Update navigation menu
|
|
|
|
## Files to Create/Update
|
|
|
|
1. **Page/View Component**: Main component for the route
|
|
2. **Route Configuration**: Add to routing setup
|
|
3. **Navigation**: Update navigation menu/sidebar
|
|
4. **Breadcrumbs**: Update breadcrumb configuration if used
|
|
5. **Tests**: Add route testing
|
|
6. **Types**: Add route-specific TypeScript types
|
|
|
|
## Best Practices
|
|
|
|
- Use proper SEO metadata (title, description, OG tags)
|
|
- Implement loading states
|
|
- Add error boundaries
|
|
- Use code splitting for better performance
|
|
- Add route guards for protected routes
|
|
- Follow consistent naming conventions
|
|
- Add proper TypeScript types for route params
|
|
- Implement skeleton loaders for better UX
|
|
- Add proper ARIA landmarks for accessibility
|
|
|
|
## Example Outputs
|
|
|
|
For a dashboard route in Next.js App Router:
|
|
- `app/dashboard/page.tsx` - Main page component
|
|
- `app/dashboard/layout.tsx` - Dashboard layout
|
|
- `app/dashboard/loading.tsx` - Loading state
|
|
- `app/dashboard/error.tsx` - Error boundary
|
|
|
|
Ask the user: "What route would you like to add to your application?"
|