# Build Next.js App Router Features

Next.js App Router work often needs correct routing, layout, and component boundaries. This skill gives targeted guidance for building pages, dynamic routes, dashboards, metadata, loading states, and route handlers.

## Install

```bash
npx skillstore add awais68/frontend-nextjs-app-router
```

## Metadata

- - Status: approved
- - Slug: awais68-frontend-nextjs-app-router
- - Version: 1.0.0
- - Author: Awais68
- - GitHub username: Awais68
- - License: MIT
- - Repository: https://github.com/Awais68/hackathon-2-phase-ii-full-stack-web-app/tree/main/.claude/skills/frontend-nextjs-app-router
- - Ref: main
- - Supported tools: Claude, Codex, Claude Code
- - Risk level: medium
- - Quality score: 50
- - Quality tier: warning
- - Public page: https://skillstore.pages.dev/skills/awais68-frontend-nextjs-app-router
- - Manifest: https://skillstore.pages.dev/api/skills/awais68-frontend-nextjs-app-router/manifest

## Capabilities

- Creates App Router page, layout, template, loading, error, and not-found file patterns.
- Explains dynamic routes, route groups, parallel routes, and intercepting routes.
- Guides Server Component and Client Component separation for data and interactivity.
- Provides dashboard and role-based page patterns for admin, teacher, and student views.
- Shows metadata, streaming, Suspense, image optimization, and revalidation examples.
- Includes shadcn/ui and Recharts usage patterns for common frontend screens.

## Use Cases

- Create Product Pages: Build App Router pages with metadata, loading states, and dynamic route parameters.
- Organize Dashboard Routes: Design nested layouts, route groups, and role-specific dashboard screens for an education or ERP app.
- Review Component Boundaries: Decide when to use Server Components, Client Components, Suspense, and client-side chart libraries.

## Prompt Templates

### Create A Basic Page

```
Create a Next.js App Router page for a dashboard. Use a Server Component by default, add metadata, and include a loading state if data is fetched.
```

### Add A Dynamic Route

```
Build an App Router dynamic route for student profiles. Include params handling, generateMetadata, a not-found state, and a clear folder structure.
```

### Design Role Dashboards

```
Design admin, teacher, and student dashboard routes using layouts, route groups, Server Components, and Client Components where needed.
```

### Audit An App Router Feature

```
Review this App Router implementation for routing correctness, component boundaries, metadata, loading states, accessibility, and missing validation or authorization.
```

## Limitations

- Examples are templates and may need validation, authorization, and error handling before production use.
- The skill focuses on App Router frontend structure, not full backend architecture.
- It does not install packages or run project commands by itself.
- Framework details may need updates for future Next.js releases.

## Best Practices

- Use Server Components by default and add Client Components only for browser APIs, hooks, or interaction.
- Pair dynamic routes with metadata, not-found handling, and explicit parameter validation.
- Treat example auth and mutation snippets as starting points that need production security checks.

## Anti Patterns

- Putting use client at the top of large route trees without a specific interaction need.
- Copying route handlers or Server Actions without validating input and checking authorization.
- Using nested layouts, templates, or parallel routes when a simple page structure is enough.

## Security Audit

- - Safe to publish: true
- - Audited at: 2026-06-28T12:25:34.786\+00:00
- - Summary: Static analysis reported many severe patterns, but review found they are almost entirely Markdown and TypeScript documentation false positives. No malicious intent, prompt injection, executable scripts, credential collection, or data exfiltration was found. The skill has medium risk because several examples can encourage under-validated server actions, route handlers, and route protection patterns.

## Stats

- - Views: 187
- - Downloads: 8
- - Favorites: 0
- - Popularity score: 0