Skip to main content
affpapa.org
RU EN
skill CX Codex

nextjs-development — Claude Code skill: what it does, how to install

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

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add manutej/luxor-claude-marketplace --skill nextjs-development -a claude-code
Open on GitHub

What nextjs-development 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.

What it helps with

  • 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 for the agent

  • 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.

How to install nextjs-development

1Skills CLI (Vercel)

npx skills add manutej/luxor-claude-marketplace --skill nextjs-development -a claude-code

2Manually: put the files in place

~/.claude/skills/nextjs-development/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/nextjs-development/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about nextjs-development

How to install nextjs-development in Claude Code?

Run npx skills add manutej/luxor-claude-marketplace --skill nextjs-development -a claude-code in your terminal. The file is added directly to ~/.claude/skills/nextjs-development/SKILL.md.

What does nextjs-development do?

It provides architecture rules for building applications with the Next.js App Router. Your assistant receives standard patterns for React Server Components, layout hierarchies, and caching options.

Does nextjs-development work with the legacy Pages Router?

No, the skill expects modern app directory routing. Using these conventions inside a project structured around the pages directory will violate framework assumptions.

Similar skills

All skills for Frontend and UI →
nextjs-app-router-patterns Seth Hobson This skill covers Next.js App Router patterns for rendering, routing, and data fetching. Use it when starting an App Router project or moving from Pages Router. CX Codex 32,529installs nextjs PyModel A skill with 42 rules for Next.js 16 App Router caching, routing and server components. Keeps your agent on current practices instead of deprecated APIs. CX Codex +1 479installs nextjs-architecture-expert davila7 A Claude subagent for Next.js architecture: App Router, Server Components, Pages Router migration and performance work. 4,935installs react-nextjs-development sickn33 Walks a React or Next.js 14+ build through eight phases, from scaffolding to a Vercel deploy. Handy when a project starts from scratch or moves to the App Router. CX Codex +1 2,000installs react-nextjs-patterns duyet App Router conventions for React and Next.js projects. Guides component architecture, cache boundaries, and Server Actions security. CX Codex +1 1,100installs nextjs-cache-architecture mohamed-hossam1 Structures caching architecture in Next.js 16+ App Router projects. It sets up the "use cache" directive, a typed tag registry, and Suspense boundaries. CX Codex +1 5,000installs

From the same set65

apache-spark-data-processing A skill that feeds your agent working knowledge of Apache Spark: RDDs, DataFrames, Spark SQL, streaming, MLlib and production deployment. CX Codex +1 480installs kafka-stream-processing Guides your coding assistant through Apache Kafka stream pipelines, event streaming patterns, and Kafka Streams task topologies. Fits data engineering workflows. CX Codex +1 480installs pydantic Guides your agent in writing Pydantic V2 models, field constraints, and application settings. CX Codex +1 475installs nodejs-development A Node.js reference skill for your coding agent: event loop phases, promises, streams, file system. Useful when the agent writes backend code or CLI tools. CX Codex +1 472installs react-patterns A skill that hands your agent ready React recipes: hooks, component composition, state management and fewer wasted re-renders. CX Codex +1 471installs SQLAlchemy ORM Expert A SQLAlchemy 2.0+ skill for customer support backends: ticket models, sessions, async queries and PostgreSQL. Useful when you build on FastAPI. CX Codex +1 470installs pandas A skill that brings pandas expertise to support operations: SLA compliance, agent metrics, PostgreSQL pulls. Useful when you need to dig through tickets and build a report. CX Codex +1 469installs database-management-patterns A reference skill for PostgreSQL and MongoDB work: schema design, indexing, transactions, replication and sharding. CX Codex +1 466installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor