frontend-nextjs-app-routerlisted

# Next.js App Router Expert ## Overview Expert guidance for Next.js App Router development including page creation, dynamic routing, nested layouts, Server/Client component optimization, and ERP role-based dashboards. ## Core Capabilities ### 1. Page Creation (`/app/.../page.tsx`) **Rules:** - Use **Server Components** by default (no 'use client' directive) - Async data fetching with `fetch()` or ORM queries directly - No `useEffect` for initial data load - Use `Suspense` boundaries for loading states - SEO metadata via `generateMetadata()` **Template:** ```typescript // app/dashboard/page.tsx import { Suspense } from 'react'; import { TaskList } from '@/components/TaskList'; import { TaskListSkeleton } from '@/components/TaskListSkeleton'; export const metadata = { title: 'Dashboard', description: 'Your task management dashboard', }; export default async function DashboardPage() { const tasks = await fetchTasks(); return ( <main className="p-4"> <h1>Dashboard</h1> <Suspense fallback={<TaskListSkeleton />}> <TaskList initialTasks={tasks} /> </Suspense> </main> ); } ``` ### 2. Dynamic Routes (`[slug]/page.tsx`) **When to use:** - Student profiles: `app/students/[studentId]/page.tsx` - Task details: `app/tasks/[taskId]/page.tsx` - Course pages: `app/courses/[courseId]/page.tsx` **Rules:** - Extract params from `params` prop (read-only) - Use `generateMetadata()` for SEO - Handle 404 with `not-found.tsx` **Template:** ```t