# nextjs-development

A reference skill for building modern Next.js applications in the app directory. It guides coding assistants through Server Components, routing, and cache revalidation.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 471 installs · ★ 62
- Author: manutej
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/manutej/luxor-claude-marketplace/tree/HEAD/plugins/luxor-frontend-essentials/skills/nextjs-development/SKILL.md
- Updated: 2026-06-13
- HTML: https://affpapa.org/en/nevibecode/skills/nextjs-development

## What it does

The skill guides the assistant through Next.js App Router conventions. It provides scaffolding patterns for root layouts in `app/layout.tsx` and dynamic routes like `[slug]`. Server components stay the default. The model isolates interactive state inside files marked with `'use client'`.

Data fetching patterns rely on extended `fetch` options. The rules demonstrate cache control with `force-cache` alongside timed ISR revalidation via `next: { revalidate: 60 }`. They also show how to run concurrent requests with `Promise.all`.

This setup targets the `app` directory exclusively. Applying these templates to a legacy Pages Router project will break routing conventions.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill nextjs-development -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/nextjs-development/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/nextjs-development/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill nextjs-development -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/nextjs-development/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill nextjs-development -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/nextjs-development/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install manutej/luxor-claude-marketplace nextjs-development
```

2. **Manually: put the files in place**
- File: `.github/skills/nextjs-development/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill nextjs-development -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-frontend-essentials/skills/nextjs-development
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/nextjs-development/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill nextjs-development -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/manutej/luxor-claude-marketplace/tree/HEAD/plugins/luxor-frontend-essentials/skills/nextjs-development/SKILL.md

## When to use it
- scaffold App Router layouts and dynamic slug pages
- separate Server Components from client-side state using `'use client'`
- configure fetch caching and ISR revalidation intervals
- orchestrate parallel server-side requests with `Promise.all`

## Example prompts
- Build a blog post page in `app/blog/[slug]/page.tsx` that fetches article data.
- Split this dashboard page into a Server Component layout and a client component for counter state.
- Set up parallel data fetching with `Promise.all` for user details and posts in `app/user/page.tsx`.

## Similar
- [nextjs-app-router-patterns](https://affpapa.org/en/nevibecode/skills/nextjs-app-router-patterns.md) — skill · 32529 installs
- [nextjs](https://affpapa.org/en/nevibecode/skills/pymodel-nextjs.md) — skill · 479 installs
- [nextjs-architecture-expert](https://affpapa.org/en/nevibecode/agents/nextjs-architecture-expert.md) — subagent · 4935 installs
- [react-nextjs-development](https://affpapa.org/en/nevibecode/skills/react-nextjs-development.md) — skill · 2000 installs
- [react-nextjs-patterns](https://affpapa.org/en/nevibecode/skills/react-nextjs-patterns.md) — skill · 1100 installs
- [nextjs-cache-architecture](https://affpapa.org/en/nevibecode/skills/nextjs-cache-architecture.md) — skill · 5000 installs

From the same set: [manutej/luxor-claude-marketplace](https://affpapa.org/en/nevibecode/by/manutej/luxor-claude-marketplace.md) — 65 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md