🚀 What’s Going On?

Next.js isn't just React. It's a full-stack framework that runs code both on the server and client.

In Next.js, components are by default Server Components — they don’t run in the browser unless you tell them to.

🧩 Two Kinds of Components

1. Server Components (Default)

• Run only on the server
• Can't access browser-only features (like useEffect, useState, or onClick)
• Logs (e.g., console.log) will show up in the terminal, not the browser
• Great for:
  • SEO (content visible to crawlers)
  • Performance (less JavaScript sent to browser)

Example: Layouts, headers, static text components

2. Client Components

• Rendered on the client (browser)
• Needed when using:
  • React hooks (useState, useEffect)
  • Event listeners (e.g., onClick)
  • Animations, timers, DOM events

To use a Client Component, add this at the very top of the file:

"use client";

Example Use Case:

An image slideshow that changes images every 5 seconds using useEffect.