skills.rest
jota-batuta
jota-batutaCOMMUNITY
Explore all skills by this author →
GitHub

react-nextjs

Enforce Batuta conventions for React/Next.js App Router frontends.

Updated Feb 20, 2026
Search Tags:#frontend#react#nextjs#app-router#server-components#client-components
One-click install
npx skills add https://github.com/jota-batuta/batuta-dots --skill react-nextjs-jota-batuta
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-nextjs
Source: https://github.com/jota-batuta/batuta-dots/tree/main/BatutaClaude/skills/react-nextjs
Command: npx skills add https://github.com/jota-batuta/batuta-dots --skill react-nextjs-jota-batuta

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enforces Batuta conventions for building React/Next.js App Router frontends, ensuring server-first rendering, strict client/server boundaries, and consistent project structure.

Core Features & Use Cases

  • Enforces Server Components as the default to minimize client-side JS and enable direct data access on the server.
  • Guides the Scope Rule by organizing components under features/{feature}/components, promoting predictable project structure and lazy-loading on-demand skills.
  • Supports explicit Client Components for interactivity, Server Actions for mutations, and clear data-fetching patterns across tenant boundaries.

Quick Start

Create a new React/Next.js App Router project and structure features according to Batuta conventions.

Frequently Asked Questions about react-nextjs

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

FAQPage Schema
How do I enforce strict server/client boundaries in Next.js App Router?▼

Strict server/client boundaries in Next.js App Router are enforced by defaulting to Server Components and mandating 'use client' only for interactive leaf components. This minimizes client-side JavaScript and preserves direct server-side data access.

What is the Scope Rule for organizing React components in Next.js?▼

The Scope Rule organizes React components under features/{feature}/components. This structure promotes a predictable project layout, supports multi-tenant data patterns, and enables lazy-loading for on-demand component skills.

How do I validate mutations using Server Actions and Zod in React?▼

Mutations in React are validated using Server Actions paired with Zod. This pattern enforces strict server-side validation before data modifications, securing multi-tenant data fetching and mutation workflows.

When should I use Client Components instead of Server Components in Next.js?▼

Use Client Components instead of Server Components in Next.js only for interactive leaves. Server Components remain the default to minimize client-side JavaScript, while Client Components are explicitly reserved for components requiring client-side interactivity.

Does this Next.js convention support multi-tenant data fetching patterns?▼

Yes, these Next.js conventions support multi-tenant data fetching patterns. The structure enforces clear data-fetching boundaries across tenants while maintaining a server-first rendering approach using Server Components and Server Actions.

Related Skills

Explore More Software Engineering Skills→
syeda-hoorain-alisyeda-hoorain-ali

nextjs-project-initialization-and-best-practices

Initialize and structure Next.js projects with TypeScript, Tailwind, and App Router.

Community
Intermediate
thesaifalitaithesaifalitai
8

nextjs-developer

Implement backend features for Next.js App Router applications with TypeScript.

Community
Advanced
ouzayrouzayr

fullstack-js

Build full-stack JavaScript apps with drizzle-zod, wouter, react-hook-form, react-query, and Tailwind CSS.

Community
Advanced
Marwan78888Marwan78888
16

react-expert

Implement React 19+ patterns with Server Components and modern hooks.

Community
Advanced