JSX & TSX 🧱⚡

JSX/TSX is the paintbrush for every Next.js component—client or server. Think of it as writing HTML with superpowers: expressions, props, and TypeScript hints.

JSX Refresher 🎨

export default function Hero() {
  const name = "Voyager";
  return (
    <section className="hero">
      <h1>Hello {name} 👋</h1>
      <button disabled={name.length < 5}>Launch</button>
    </section>
  );
}

• Curly braces evaluate any JS expression.
• Use className, htmlFor, camelCase event handlers.
• Fragment shorthand <>...</> keeps DOM clean.

TSX Nuggets 🧠

type HeroProps = {
  title: string;
  cta?: string;
};
 
export function Hero({ title, cta = "Start" }: HeroProps) {
  return <button>{cta}: {title}</button>;
}

• Types live alongside markup; editors catch prop mistakes instantly.
• React.ReactNode describes renderable children.
• For components returning null, annotate return type if inference gets fuzzy.

Server vs Client Components 🌍💻

• Server components (default in Next.js App Router) still use JSX; they just run on the server.
• Client components add 'use client' pragma and can use browser APIs.

Common Pitfalls 🚧

• Wrap multiple siblings in a parent or fragment—JSX must return a single root.
• Avoid inline objects/arrays if they cause re-render churn; memoize or pull out.
• Remember that expressions are sandboxed—no statements like if or for directly inside JSX.

Analogy: JSX is a bilingual storyboard—half HTML, half JavaScript—letting you sketch UI with live data scribbled in the margins.

Master JSX/TSX and Next.js components become just stories told in slightly different settings (server vs client). 📖