Chapter 3

Components in Next.js

Learn Server vs Client Components and how real apps are structured.

What are Components?

Components are reusable building blocks in React and Next.js. Every UI element like buttons, cards, and pages is a component.

function Button() {
  return <button>Click Me</button>;
}

Server vs Client Components

Server Components (Default)

Runs on the server. Faster and better for SEO. Cannot use hooks like useState.

Client Components ("use client")

Runs in browser. Used for interactivity like clicks, state, animations.

Server Component Example

No "use client" means this runs on server.

export default function Page() {
  return <h1>Hello from Server Component</h1>;
}

Client Component Example

Needs "use client" for interactivity like state and events.

"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

When to Use Server vs Client Components?

In Next.js, choosing the right component type is very important. It affects performance, speed, and user experience.

Server Components (Default)

Use Server Components when your page does NOT need user interaction. These run on the server, so they are very fast and SEO-friendly.

Best for:

Blog posts
Landing pages
Static content (About, Home pages)
Displaying data from database

Client Components ("use client")

Use Client Components when your page needs interaction from the user. These run in the browser, so they can use state and events.

Best for:

Buttons with click events
Forms (login, signup, search)
Animations and UI effects
Interactive components (modals, dropdowns)

Best Practice (Real Apps)

Most real applications use BOTH together. Server Components handle data and performance, while Client Components handle user interaction.

Example: A blog page (server) + like button (client)

Summary

Next.js uses two types of components:
• Server Components → fast, static, SEO-friendly
• Client Components → interactive, dynamic UI

Pro Tip

Always keep most components as Server Components and only use Client Components when needed.