nextjs-react

This skill enforces Next.js 16 App Router and React patterns. It depends_on: [clean-code, frontend-fundamentals] which are loaded transitively — clean-code gives universal code quality, frontend-fundamentals gives stack-agnostic UI patterns (three-state async, hydration, a11y, SEO). This skill adds ONLY Next.js-App-Router and React-version-specific layering on top.

Pre-Code Checklist

Before writing or modifying any .ts/.tsx file:

• Read docs/engineering/frontend-rules.md
• If touching data fetching or rendering logic: read docs/engineering/frontend-rendering-rules.md
• If touching design, layout, or styling: read STYLE_GUIDE.md + the relevant file in docs/design/
• If touching API calls or error handling: read docs/api-contracts/error-format.md
• Search the repo for existing components and hooks before creating new ones (use Grep/Glob)

1. Server Components First

Default to Server Components. Never add 'use client' unless the component genuinely requires it.

When to use 'use client'

• Browser APIs (window, document, navigator, localStorage)
• Event handlers (onClick, onChange, onSubmit)
• React state or effects (useState, useEffect, useReducer, useRef with mutations)
• Third-party client-only libraries (e.g., motion, chart libraries)

Correct — Server Component (default)

// app/products/[slug]/page.tsx
// No 'use client' — this is a Server Component
import { getProduct } from "@/lib/api/products";
import { ProductDetails } from "@/components/products/product-details";

export default async function ProductPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const product = await getProduct(slug);

  return <ProductDetails product={product} />;
}

Correct — Client Component (only when needed)

// components/products/add-to-cart-button.tsx
"use client";

import { useState } from "react";

interface AddToCartButtonProps {
  productId: string;
  onAdd: (id: string) => void;
}

export function AddToCartButton({ productId, onAdd }: AddToCartButtonProps) {
  const [isAdding, setIsAdding] = useState(false);

  async function handleClick() {
    setIsAdding(true);
    try {
      await onAdd(productId);
    } finally {
      setIsAdding(false);
    }
  }

  return (
    <button onClick={handleClick} disabled={isAdding}>
      {isAdding ? "Adding..." : "Add to Cart"}
    </button>
  );
}