# Apply Next.js App Router Patterns

Teams often mix App Router patterns across pages, layouts, navigation, data loading, fonts, and metadata. This skill gives concise Next.js conventions for consistent project code.

## Install

```bash
npx skillstore add abdulsamad94/next-js-patterns
```

## Metadata

- - Status: approved
- - Slug: abdulsamad94-next-js-patterns
- - Version: 1.0.0
- - Author: AbdulSamad94
- - GitHub username: AbdulSamad94
- - License: MIT
- - Repository: https://github.com/AbdulSamad94/Hackhaton-SpecsKitPlus/tree/master/.claude/skills/nextjs
- - Ref: master
- - Supported tools: Claude, Codex, Claude Code
- - Risk level: safe
- - Quality score: 80
- - Quality tier: silver
- - Public page: https://skillstore.pages.dev/skills/abdulsamad94-next-js-patterns
- - Manifest: https://skillstore.pages.dev/api/skills/abdulsamad94-next-js-patterns/manifest

## Capabilities

- Explains where App Router pages and layouts should live.
- Clarifies when to use Client Components instead of Server Components.
- Recommends Link and useRouter for common navigation flows.
- Describes basic Server Component and Client Component data fetching choices.
- Notes project conventions for next/font and metadata exports.

## Use Cases

- Create consistent routes: Use the skill to place pages and layouts in the expected App Router folders.
- Review component boundaries: Use the skill to decide whether a component should stay on the server or use client behavior.
- Onboard contributors: Use the skill as a short project reference for navigation, data fetching, fonts, and metadata.

## Prompt Templates

### Place a new page

```
Using the Next.js patterns skill, tell me where to add a new dashboard page and what files I should consider.
```

### Choose server or client

```
Review this component idea against the skill. Should it be a Server Component or a Client Component?
```

### Plan navigation

```
Use the skill to design internal navigation for this flow, including when Link or useRouter is appropriate.
```

### Audit an App Router feature

```
Evaluate this planned Next.js feature against the skill for routing, layout, data fetching, fonts, and metadata consistency.
```

## Limitations

- It provides guidance only and does not modify project files by itself.
- It is focused on Next.js 15 App Router projects.
- It does not validate code against a live Next.js build.
- It does not cover Pages Router or advanced deployment configuration.

## Best Practices

- Start with Server Components unless the feature needs state, effects, or browser APIs.
- Use Link for standard internal navigation and useRouter for programmatic client navigation.
- Define metadata near the page or layout that owns the route.

## Anti Patterns

- Adding use client to every component without a browser-side requirement.
- Using programmatic navigation when a normal internal link is sufficient.
- Scattering font and metadata decisions across unrelated components.

## Security Audit

- - Safe to publish: true
- - Audited at: 2026-06-28T04:46:12.779\+00:00
- - Summary: Static analysis flagged Markdown backticks, a documented fetch example, and a weak-crypto pattern on the description line. Review found these are documentation false positives, with no executable commands, external endpoint, cryptographic implementation, or prompt injection.

## Stats

- - Views: 250
- - Downloads: 11
- - Favorites: 0
- - Popularity score: 0