# Plan Next.js App Router Architecture

Next.js teams can struggle to choose routes, components, data loading, and migration steps. This skill gives structured architecture guidance for App Router, Server Components, and performance.

## Install

```bash
npx skillstore add joseph obrien/89jobrien-nextjs-architecture
```

## Metadata

- Status: approved
- Slug: 89jobrien-nextjs-architecture
- Version: 1.0.1
- Author version: 1.0.1
- Skillstore revision: r1
- Version status: valid
- Tree hash: 89cf321d0ddf75b0a9e9ef3249ab10350004490e1eff98bac9f2bf8427acbf9b
- Author: Joseph OBrien
- GitHub username: 89jobrien
- License: MIT
- Repository: https://github.com/89jobrien/steve/tree/main/steve/skills/nextjs-architecture
- Ref: c4037264bbd363c572662d6154a3ab28f5ca4f53
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands
- Quality score: 81
- Quality tier: silver
- Public page: https://skillstore.pages.dev/skills/89jobrien-nextjs-architecture
- Manifest: https://skillstore.pages.dev/api/skills/89jobrien-nextjs-architecture/manifest

## Capabilities

- Designs App Router folder structures for authenticated, dashboard, and API areas.
- Guides migration from Pages Router to App Router layouts and pages.
- Recommends Server Component and Client Component boundaries.
- Suggests performance strategies such as static generation, ISR, streaming, images, and code splitting.
- Applies production-focused Next.js architecture best practices.

## Use Cases

- Design a New Product Architecture: Create a Next.js App Router structure with route groups, layouts, API routes, and data loading choices.
- Plan a Router Migration: Convert Pages Router concepts into App Router layouts, pages, and server-first data patterns.
- Review Production Readiness: Evaluate component boundaries, rendering modes, streaming, image handling, and code splitting before release.

## Prompt Templates

### Plan a New App Router Project

```
Use the nextjs-architecture skill to design an App Router structure for a [type] app with [features]. Include route groups, layouts, and data loading guidance.
```

### Choose Component Boundaries

```
Review this feature plan and recommend Server Components, Client Components, Suspense boundaries, and data fetching patterns.
```

### Migrate Pages Router

```
Analyze this Pages Router structure and create a phased migration plan to App Router. Include layout conversion, route mapping, and risk checks.
```

### Optimize Production Architecture

```
Audit this Next.js architecture for performance and scalability. Recommend static generation, ISR, streaming, caching, image strategy, and code splitting improvements.
```

## Limitations

- Does not inspect a live repository unless the host agent provides project files.
- Does not execute migrations, install packages, or run build commands by itself.
- Guidance may need adjustment for current Next.js releases and project constraints.
- Does not replace security, accessibility, or production performance testing.

## Best Practices

- Provide current route structure, key pages, data sources, and auth requirements.
- Ask for migration risks, fallback plans, and validation checks when changing routers.
- Validate recommendations against the exact Next.js version and deployment platform.

## Anti Patterns

- Asking for a full architecture without sharing routes, data needs, or constraints.
- Applying Client Components broadly when Server Components satisfy the feature.
- Treating generated migration steps as complete without testing build, routing, and performance.

## Security Audit

- Audited at: 2026-07-05T13:14:34.834\+00:00
- Summary: Static analysis flagged Markdown code fences as Ruby or shell backtick execution. Review of SKILL.md shows these lines are examples, directory trees, and TypeScript samples, not commands executed by the skill. No prompt injection or intent-level abuse was found.

## Stats

- Views: 217
- Downloads: 18
- Favorites: 0
- Popularity score: 0