Components + Props + State 🧩

Next.js pages and UI slots are just React components at heart. Treat them like LEGO pieces: props configure them, state lets them react to user input or data.

Function Components 🧱

export function PricingCard({ plan, price }: { plan: string; price: number }) {
  return (
    <article>
      <h3>{plan}</h3>
      <p>${price}/mo</p>
    </article>
  );
}

• Stateless by default—pure functions of props.
• Props flow top → down; avoid mutating them.

State Basics 🎛️

'use client';
import { useState } from 'react';
 
export function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

• Only client components can hold reactive state (server components receive data via props).
• Updates trigger re-renders; React diffs the output.

Prop Patterns 🧠

• Children: <Layout>{page}</Layout> for slots.
• Render props: pass a function for flexible rendering.
• Component props: const Wrapper = ({ as: Tag = 'div', ...props }) => <Tag {...props} />;

Data Flow Tips 🌊

• Keep source of truth high enough to share across siblings.
• Pass callbacks down to mutate parent state (“lifting state up”).
• In Next.js, combine server data fetching with hydrated client state when interactivity is needed.

Analogy: props are ingredient labels you stick on each component, and state is the temperature knob inside the component’s oven.

Nail these basics and Next.js routes become easy-to-compose UI trees. 🌳