react-nextjs

Develop React 19 and Next.js 16 App Router applications with server and client components.

16|2|Updated Nov 9, 2025
One-click install
npx skills add https://github.com/maroffo/claude-forge --skill react-nextjs-maroffo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-nextjs
Source: https://github.com/maroffo/claude-forge/tree/main/skills/react-nextjs
Command: npx skills add https://github.com/maroffo/claude-forge --skill react-nextjs-maroffo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the development of modern web applications using React 19 and Next.js 16, addressing common challenges in state management, data fetching, and component architecture.

Core Features & Use Cases

  • App Router Development: Leverage the latest Next.js App Router patterns for server and client components.
  • State Management: Implement robust global and server state solutions.
  • Form Handling: Utilize Server Actions and useActionState for efficient form submissions and validation.
  • Performance Optimization: Apply best practices for image loading, lazy loading, and auto-memoization.
  • Use Case: Develop a new feature for an e-commerce site, including a dynamic product display (Server Components), an interactive add-to-cart button (Client Component), and a secure checkout form (Server Actions).

Quick Start

Use the react-nextjs skill to create a new Next.js page with server and client components.

Frequently Asked Questions about react-nextjs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I handle data fetching and state management in Next.js App Router?

Data fetching and state management in Next.js App Router are handled using Server Components for initial data loads, while client state can be managed with Zustand and server state with TanStack Query.

What is the best way to handle form submissions in React 19?

Form submissions in React 19 are best handled using Server Actions and the useActionState hook, which facilitate efficient data mutations and validation directly within your Next.js App Router components.

How do I use Server and Client Components together in Next.js 16?

Server and Client Components in Next.js 16 are combined by fetching data on the server and passing it to interactive client components, allowing you to build dynamic pages with optimized performance.

Can I use the use cache directive for performance optimization in Next.js?

Yes, the use cache directive is supported for performance optimization in Next.js, alongside best practices for image loading, lazy loading, and auto-memoization to enhance application speed.

What testing strategies work with React 19 and Next.js applications?

Testing strategies for React 19 and Next.js applications include using Vitest for unit tests and Playwright for end-to-end testing, ensuring your server and client components function correctly.