Components in Next.js

In this tutorial, you will cover Server Components, Client Components, when to use Server vs Client Components, and Props & Reusability.

Next.js introduces a modern way to create a React application using Server Components and Client Components.

Server Components in Next.js

In the App Router (/app), all components are Server Components by default.

Note: Server Components run on the server, not the client side.

Important Features

1. No JavaScript sent to the client
2. Faster performance
3. Better SEO
4. Direct database access
5. Secure backend operations

Example of Server Component

export default function Home() {
  const data = getDataFromDatabase(); // Safe on server
  return <h1>Welcome to Next.js</h1>
}

Benefits of Server Components

There are many benefits of Server Components

1. Faster initial load.
2. Used for Dynamic Pages.
3. Can fetch data securely.
4. Zero client-side JS bundle.

---

Client Components in Next.js

Client components run on the browser, not the server side. They support below points.

1. It supports state (useState).
2. It supports lifecycle hooks (useEffect, useRef, etc.).
3. It supports user interactions like buttons, input boxes, etc.
4. It supports local storage, window, document, etc.

Note: To create a client component, you have to add “use client” at the top.

Example:

"use client";

import { useState } from "react";

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

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

When to use Server Components?

There are many reasons to use server components.

1.  Fetching data from DB or API.
2. There is a need for SEO content.
3. Rendering dynamic pages.
4. There is a need for Heavy computations.

When to use Client Components?

The following points are to use Client Components.

1. When you need React Hooks.
2. When you need a browser API.
3. When you need forms, animations, modals, etc.
4. Need real-time updates.

 Where to use Mixed Components?

Mixed components is a combination of Server Components and Client Components.

You can combine, Parents components as a Server Components and Child Component as Client Components.

Example:

app/main/page.js        → Server Component
components/Chart.js     → Client Component

Server Components Example:

export default function Dashboard() {
  const stats = await getStats();
  return <Chart data={stats} />;
}

Client Components Example:

"use client";

export default function Chart({ data }) {
  // Render chart in browser
}

How to use Props & Reusability in Next.js Components

Props allow you to send data from parent to child components.

Example: In the example, I will send title and description into the Card component.

export default function Card({ title, description }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}

Now, you will pass title and description into Card component.

<Card title="Next.js Tutorial" description="Learn Next.js step by step." />

Components in Next.js – Interview Questions

Components in Next.js – Objective Questions (MCQs)

Related Components in Next.js Topics