Agent skill · software engineering · aiskillstore
frontend-nextjs-app-router
Use when working with Next.js App Router tasks - creating pages in /app/, setting up dynamic routes ([id]/page.tsx), implementing nested layouts/templates (layout.tsx), optimizing Server/Client components, or building ERP role-based pages (admin/teacher/student dashboards). Auto-use for all /app/ directory operations, dynamic routing, and App Router-specific features.
Why this skill is useful
Provides specific templates and rules for Next.js App Router development that the AI wouldn't reliably generate on its own.
What it needs
About 5k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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: 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: 3. Parallel Routes (@folder) When to use: Dashboard variants: app/dashboard@(admin teacher)/page.tsx Split layouts: app/settings@(user organization)/layout.tsx Template: 4. Layouts & Templates Root Layout (app/layout.tsx): Nested Layout (app/dashboard/layout.tsx): Template (app/tasks/template.tsx): 5. Server vs Client Components Use Server Components for: Data fetching Direct database queries Static content Server-only operations Use Client Components ('use client') for: Browser APIs (window, localStorage) Event handlers (onClick, onSubmit) React hooks (useState, useEffect) State management (Zustand, Redux) Interactivity 6. ERP Role-Based Pages Role Guards: KPI Dashboard (Recharts): 7. Error & Loading States Error Boundary (error.tsx): Loading State (loading.tsx): 8. shadcn/ui Integration Installation: Usage in Server Components: Workflow Decision Tree User Request → Analyze → Implementation Path 1. "Dashboard/Admin page banao" → Server Component with page.tsx → Async data fetch → Add layout.tsx if navigation needed 2. "Dynamic student profile" → Create [studentId]/page.tsx → Extract params → Add generateMetadata() → Create not-found.tsx if needed 3. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/frontend-nextjs-app-router