# Build Next.js 15 App Router Features

Next.js 15 projects need correct App Router, Server Component, and Server Action patterns. This skill gives Claude, Codex, and Claude Code concise reference examples for modern implementation work.

## Install

```bash
npx skillstore add barnhardt-enterprises-inc/nextjs-15-patterns
```

## Metadata

- - Slug: barnhardt-enterprises-inc-nextjs-15-patterns
- - Version: 1.0.0
- - Author: Barnhardt-Enterprises-Inc
- - GitHub username: Barnhardt-Enterprises-Inc
- - License: MIT
- - Repository: https://github.com/Barnhardt-Enterprises-Inc/quetrex-claude/tree/main/skills/nextjs-15-patterns
- - Ref: main
- - Supported tools: Claude, Codex, Claude Code
- - Risk level: low
- - Quality score: 75
- - Public page: https://skillstore.pages.dev/skills/barnhardt-enterprises-inc-nextjs-15-patterns
- - Manifest: https://skillstore.pages.dev/api/skills/barnhardt-enterprises-inc-nextjs-15-patterns/manifest

## Capabilities

- Explains when to use Server Components and Client Components.
- Shows Server Action patterns with validation, revalidation, and redirects.
- Summarizes App Router file conventions, dynamic routes, and intercepting routes.
- Provides data fetching patterns for parallel, sequential, cached, and streamed data.
- Includes route handler and metadata examples for common pages and APIs.

## Use Cases

- Create App Router Pages: Generate pages, layouts, loading states, and error boundaries that follow Next.js 15 conventions.
- Implement Server Actions: Add mutation flows with input validation, cache revalidation, and optional redirects.
- Review Data Fetching Choices: Compare server fetching, client fetching, caching, streaming, and sequential loading patterns.

## Prompt Templates

### Explain The Pattern

```
Explain how I should structure a basic Next.js 15 App Router page with loading and error states.
```

### Build A Server Action

```
Create a Server Action plan for a form that validates input, writes data, and refreshes the affected route.
```

### Choose Data Fetching

```
Review this feature idea and recommend server fetching, client fetching, caching, or streaming for each data source.
```

### Refactor A Route Tree

```
Design a Next.js 15 route structure with route groups, dynamic segments, metadata, and an intercepted modal route.
```

## Limitations

- Does not run Next.js commands, install packages, or modify projects by itself.
- Examples are concise and may need adaptation for a specific database or auth system.
- Does not cover every Next.js 15 feature or migration scenario.
- Does not replace official documentation for version-specific edge cases.

## Best Practices

- Prefer Server Components unless browser state, effects, or event handlers are required.
- Validate all Server Action inputs before database writes or cache revalidation.
- Fetch data where it is used and stream slower sections with Suspense.

## Anti Patterns

- Do not mark a whole route as client-side when only one interactive component needs it.
- Do not use API route mutations when a Server Action is simpler and appropriate.
- Do not ignore loading, error, and not-found states in App Router routes.

## Security Audit

- - Safe to publish: true
- - Audited at: 2026-06-28T13:44:51.449\+00:00
- - Summary: The high static score is driven by false positives in Markdown documentation. Backticks are TypeScript code fences and template literals, not Ruby shell execution, and the fetch calls are Next.js examples using example.com or local routes. No prompt injection, executable scripts, malicious network behavior, or data exfiltration intent was found.

## Stats

- - Views: 194
- - Downloads: 6
- - Favorites: 0
- - Popularity score: 0