Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Next.js App Router Expert · aiskillstore | DecimalAI

aiskillstore/frontend-nextjs-app-router

NewSkillScoreMaintained

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.

Frontendby aiskillstore

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/aiskillstore-frontend-nextjs-app-router/SKILL.md

decimalai skills pull aiskillstore-frontend-nextjs-app-router --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/aiskillstore-frontend-nextjs-app-router/SKILL.md https://app.decimal.ai/s/aiskillstore-frontend-nextjs-app-router/SKILL.md

Raw file: /s/aiskillstore-frontend-nextjs-app-router/SKILL.md ↗ · machine-readable summary at /s/aiskillstore-frontend-nextjs-app-router.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

22 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 18d ago

No measurable change+83% tokens0% turns95% of whole cases pass with skill (21/22)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-01	✗→✓	▲ Improved	42%	0%
case-19	✓→✗	▼ Worse	108%	0%
case-02	✓→✓	＝ Same ✓	23%	0%
case-03	✓→✓	＝ Same ✓	77%	0%
case-10	✓→✓	＝ Same ✓	74%	0%

Showing 5 of 22 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/10/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

aiskillstore / marketplace

skills/awais68/frontend-nextjs-app-router/SKILL.md

View on GitHub ↗

Imported 8/10/2026Version v1Bundled 1 file

Skill contents

references/

SKILL.md

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:

typescript
// app/students/[studentId]/page.tsx
import { notFound } from 'next/navigation';

type Params = Promise<{ studentId: string }>;

export async function generateMetadata({ params }: { params: Params }) {
  const { studentId } = await params;
  const student = await getStudent(studentId);

  if (!student) return { title: 'Student Not Found' };

  return {
    title: `${student.name} - Student Profile`,
  };
}

export default async function StudentProfile({ params }: { params: Params }) {
  const { studentId } = await params;
  const student = await getStudent(studentId);

  if (!student) notFound();

  return <StudentProfileView student={student} />;
}

3. Parallel Routes (`@folder`)

When to use:

Dashboard variants: app/dashboard@(admin|teacher)/page.tsx
Split layouts: app/settings@(user|organization)/layout.tsx

Template:

typescript
// app/dashboard/@admin/page.tsx - Admin dashboard
export default function AdminDashboard() {
  return <AdminPanel />;
}

// app/dashboard/@teacher/page.tsx - Teacher dashboard
export default function TeacherDashboard() {
  return <TeacherPanel />;
}

4. Layouts & Templates

Root Layout (app/layout.tsx):

typescript
import { Providers } from '@/components/Providers';
import './globals.css';

export const metadata = {
  title: 'Todo Evolution',
  description: 'Task management for education',
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Nested Layout (app/dashboard/layout.tsx):

typescript
import { DashboardNav } from '@/components/DashboardNav';

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="flex min-h-screen">
      <DashboardNav />
      <main className="flex-1 p-6">{children}</main>
    </div>
  );
}

Template (app/tasks/template.tsx):

typescript
// Re-executes on navigation, preserves form state
export default function TasksTemplate({ children }: { children: React.ReactNode }) {
  return (
    <div className="bg-gray-50 min-h-screen">
      <header className="bg-white shadow">
        <h1>Tasks</h1>
      </header>
      {children}
    </div>
  );
}

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

typescript
// Server Component (default)
export default async function TaskList() {
  const tasks = await fetchTasks(); // Direct DB query
  return <div>{tasks.map(/* ... */)}</div>;
}

// Client Component
'use client';
import { useTaskStore } from '@/store/tasks';

export function TaskFilter() {
  const { filter, setFilter } = useTaskStore();
  return <button onClick={() => setFilter('all')}>All Tasks</button>;
}

6. ERP Role-Based Pages

Role Guards:

typescript
// app/admin/page.tsx
import { requireRole } from '@/lib/auth';
import { redirect } from 'next/navigation';

export default async function AdminPage() {
  const session = await getSession();

  if (session?.role !== 'admin') {
    redirect('/unauthorized');
  }

  return <AdminDashboard />;
}

KPI Dashboard (Recharts):

typescript
'use client';
import { BarChart, Bar, XAxis, YAxis, Tooltip } from 'recharts';

export function TaskKPIChart({ data }: { data: TaskStats[] }) {
  return (
    <BarChart width={600} height={300} data={data}>
      <XAxis dataKey="date" />
      <YAxis />
      <Tooltip />
      <Bar dataKey="completed" fill="#22c55e" />
    </BarChart>
  );
}

7. Error & Loading States

Error Boundary (error.tsx):

typescript
'use client';
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

Loading State (loading.tsx):

typescript
export default function Loading() {
  return <div className="animate-pulse">Loading...</div>;
}

// Or with Suspense:
export default async function Page() {
  return (
    <Suspense fallback={<Loading />}>
      <Content />
    </Suspense>
  );
}

8. shadcn/ui Integration

Installation:

bash
npx shadcn@latest add button card input dialog

Usage in Server Components:

typescript
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader } from '@/components/ui/card';

export default async function TaskPage() {
  const tasks = await getTasks();

  return (
    <Card>
      <CardHeader>Tasks</CardHeader>
      <CardContent>
        {tasks.map(task => (
          <div key={task.id}>{task.title}</div>
        ))}
      </CardContent>
    </Card>
  );
}

Workflow Decision Tree

User Request → Analyze → Implementation Path

"Dashboard/Admin page banao"

→ Server Component with page.tsx → Async data fetch → Add layout.tsx if navigation needed

"Dynamic student profile"

→ Create [studentId]/page.tsx → Extract params → Add generateMetadata() → Create not-found.tsx if needed

"Shared layout add karo"

→ Create layout.tsx in target folder → Wrap with providers if needed → Maintain children render

"Form add karo"

→ 'use client' component → useState for form data → Server Action for submission OR API route

"KPI charts/Analytics"

→ 'use client' for Recharts → Server Component parent with data fetch → Pass data as props

Quality Checklist

Before marking task complete:

] TypeScript strict mode enabled
] Server Components used by default
] 'use client' only when necessary
] generateMetadata() for SEO
] Suspense boundaries for async data
] Error boundaries (error.tsx) where needed
] No hydration mismatches
] Performance optimized (no blocking renders)
] Mobile-first responsive design
] Accessible (ARIA labels, keyboard nav)

Common Patterns

Pattern 1: Server Component + Client Component Mix

typescript
// Server Component
export default async function Page() {
  const tasks = await fetchTasks();
  return <TaskList tasks={tasks} />; // Client component for interactivity
}

'use client';
function TaskList({ tasks }: { tasks: Task[] }) {
  const [filter, setFilter] = useState('all');
  const filtered = tasks.filter(/* ... */);
  return <div>{filtered.map(/* ... */)}</div>;
}

Pattern 2: Route Groups for Organization

app/
  (marketing)/     # Group: no URL segment
    about/page.tsx
    contact/page.tsx
  (dashboard)/      # Group: no URL segment
    layout.tsx
    page.tsx

Pattern 3: API Routes (Route Handlers)

typescript
// app/api/tasks/route.ts
import { NextResponse } from 'next/server';

export async function GET() {
  const tasks = await db.query.tasks.findMany();
  return NextResponse.json(tasks);
}

export async function POST(request: Request) {
  const body = await request.json();
  const task = await createTask(body);
  return NextResponse.json(task, { status: 201 });
}

Trigger Examples

"Dashboard page banao" → Generate app/dashboard/page.tsx with server component
"Dynamic student profile route" → app/students/[studentId]/page.tsx with params and metadata
"Shared layout add karo" → app/dashboard/layout.tsx with children
"Admin panel with charts" → Server component + Client chart component
"Login page banao" → 'use client' form component + API route
"404 page customize karo" → app/not-found.tsx
"Error handle karo" → app/dashboard/error.tsx

References

See references/app-router-patterns.md for advanced patterns and references/api-routes.md for route handler examples.

Illustrative Want to see what aiskillstore/frontend-nextjs-app-router would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

9/4/2026, 02:56 UTC · 22 cases

Lift

95% vs 95%

Agent turns

1.0 vs 1.0

Tokens

+83%

5,310.09 vs 2,901.95

fail → pass · 1pass → pass · 20pass → fail · 1

Per-case results (22)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-01 I am developing a task management feature in Next.js App Router. Could you write the page code for `app/tasks/page.tsx` that loads initial task items during server render, presents skeleton loading fallback UI while content resolves, and integrates an interactive client component for filtering tasks?	fail→pass	27,210	22,619	-17%	1	1	0%	4,525	6,421	+42%	0	0	—
case-02 Write a Next.js App Router profile page component in `app/students/[studentId]/page.tsx`. The user wants to see student profile data fetched dynamically. Make sure to handle missing student records cleanly.	pass→pass	25,243	18,183	-28%	1	1	0%	4,582	5,619	+23%	0	0	—
case-03 Show how to structure a Next.js App Router dashboard using split slots for admin and teacher views under `app/dashboard`.	pass→pass	20,084	17,889	-11%	1	1	0%	2,999	5,320	+77%	0	0	—
case-10 Write custom error fallback handling for the dashboard sub-tree in Next.js App Router located at `app/dashboard/error.tsx`.	pass→pass	14,355	11,630	-19%	1	1	0%	2,966	5,156	+74%	0	0	—
case-04 Create a minimal root layout file for a Next.js App Router application in `app/layout.tsx` that includes global providers.	pass→pass	11,835	9,105	-23%	1	1	0%	1,206	3,488	+189%	0	0	—
case-05 Write a route component wrapper in `app/tasks/template.tsx` for Next.js App Router where navigation between task steps should force state re-initialization and re-render header animations.	pass→pass	18,434	20,809	+13%	1	1	0%	2,761	5,931	+115%	0	0	—
case-06 Create a task list summary view in Next.js App Router at `app/summary/page.tsx` that queries PostgreSQL database directly. Should I add 'use client' to do async/await database calls?	pass→pass	19,427	16,730	-14%	1	1	0%	2,793	5,111	+83%	0	0	—
case-07 Write a task filter button bar component in Next.js App Router that relies on Zustand state store hooks for setting task filters on user click.	pass→pass	19,520	17,617	-10%	1	1	0%	3,091	5,405	+75%	0	0	—
case-08 Implement an administrative settings page at `app/admin/page.tsx` in Next.js App Router. Non-admin users who land on this page must be prevented from seeing content and immediately redirected to an unauthorized screen.	pass→pass	17,823	21,116	+18%	1	1	0%	2,586	5,688	+120%	0	0	—
case-09 Build a completion rate bar chart for task metrics in Next.js App Router using Recharts inside an executive dashboard.	pass→pass	27,616	23,232	-16%	1	1	0%	5,210	6,506	+25%	0	0	—
case-11 Create a skeleton loading UI component at `app/dashboard/loading.tsx` in Next.js App Router that automatically renders while dashboard routes resolve.	pass→pass	21,746	18,618	-14%	1	1	0%	3,903	5,309	+36%	0	0	—
case-12 Write a task overview card component using imported shadcn Card and CardHeader components in Next.js App Router.	pass→pass	24,968	13,735	-45%	1	1	0%	2,910	5,659	+94%	0	0	—
case-13 How should I structure a Next.js App Router page that fetches task records from an ORM, but allows client-side filtering without refetching from the database?	pass→pass	19,176	21,347	+11%	1	1	0%	2,682	6,215	+132%	0	0	—
case-14 How do I group related authentication routes like login and signup under a common layout folder in Next.js App Router without creating an extra `/auth` URL path segment?	pass→pass	7,997	15,514	+94%	1	1	0%	1,362	4,810	+253%	0	0	—
case-15 Write an API route handler in Next.js App Router at `app/api/tasks/route.ts` that handles POST HTTP requests to create a task item.	pass→pass	12,122	12,421	+2%	1	1	0%	1,397	4,284	+207%	0	0	—
case-16 Create a custom missing resource view for dynamic task routes in Next.js App Router when a task ID is invalid.	pass→pass	14,136	12,489	-12%	1	1	0%	2,907	5,203	+79%	0	0	—
case-17 Implement dynamic SEO header tags for dynamic course pages at `app/courses/[courseId]/page.tsx` in Next.js App Router.	pass→pass	15,098	10,709	-29%	1	1	0%	2,944	4,907	+67%	0	0	—
case-18 I am working on a legacy Next.js project using the Pages Router in `pages/posts/[id].js`. How do I pre-render paths and fetch data at build time?	pass→pass	10,501	15,098	+44%	1	1	0%	2,064	4,497	+118%	0	0	—
case-19 How do I set up route middleware and JSON body parsing for a Node.js API built using Express.js?	pass→fail	17,850	18,163	+2%	1	1	0%	2,487	5,174	+108%	0	0	—
case-20 How do I configure nested route outlets and dynamic client URL params in a React SPA created with Vite and React Router v6?	pass→pass	15,259	21,435	+40%	1	1	0%	2,803	5,922	+111%	0	0	—
case-21 How do I import and apply class names from a standard CSS Module file named `styles.module.css` in a React component?	pass→pass	13,183	13,826	+5%	1	1	0%	1,554	4,105	+164%	0	0	—
case-22 How do I implement an interactive task creation modal form component in Next.js App Router that tracks local open state and user inputs?	pass→pass	25,224	16,538	-34%	1	1	0%	4,111	6,092	+48%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted. The headline lift of 0 percentage points is the difference between those two pass rates over the 22 comparable cases. 1 case got worse with the skill loaded, and it is included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 95.5%
Pass rate with the skill: 95.5%
Cases attempted: 22
Cases counted toward lift: 22
Cases that regressed: 1
Skill version measured: v1
Run completed: 9/4/2026, 02:56 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-01

Prompt

I am developing a task management feature in Next.js App Router. Could you write the page code for `app/tasks/page.tsx` that loads initial task items during server render, presents skeleton loading fallback UI while content resolves, and integrates an interactive client component for filtering tasks?

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signalsno signals yet

BenchmarkRun a verified benchmark with positive lift

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+85% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

No signals yet — run a benchmark or collect evaluated traces to earn a score.

Verified on gemini-3.6-flash · re-tested 17 days ago

Other measured skills in the registry, with their headline benchmark lift.

Ready to supercharge your AI agents?

aiskillstore/frontend-nextjs-app-router

SkillSafety

Source

Next.js App Router Expert

Overview

Core Capabilities

1. Page Creation (/app/.../page.tsx)

2. Dynamic Routes ([slug]/page.tsx)

3. Parallel Routes (@folder)

4. Layouts & Templates

5. Server vs Client Components

6. ERP Role-Based Pages

7. Error & Loading States

8. shadcn/ui Integration

Workflow Decision Tree

Quality Checklist

Common Patterns

Trigger Examples

References

How this skill was measured

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-01

Related skills

1. Page Creation (`/app/.../page.tsx`)

2. Dynamic Routes (`[slug]/page.tsx`)

3. Parallel Routes (`@folder`)