Next.js - lesson 3 | HackIndia Skills

Key point

One split rule

Keep pages and layouts as Server Components by default. Make a Client Component only when you need clicks, typing, state, effects, or browser APIs like window and localStorage.

This keeps less JavaScript on the judge phone. It also keeps server-only code away from the browser.

Default is server

In the App Router, layouts and pages are Server Components unless you mark them otherwise. So app/page.tsx and app/dashboard/page.tsx can render UI without adding 'use client'.

Server Components are good for reading files, calling a database later, and preparing data before the page reaches the browser. You will use that more in the next lesson.

Your to-do

Choose the side

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Keep route pages as Server Components when they only display content.
Create a separate component for interactive UI like a vote button, search box, tab switcher, or form draft state.
Put 'use client' at the top of that small component file, before imports.
Pass only simple data as props, such as strings, numbers, booleans, arrays, and plain objects.
Avoid importing server-only code into a Client Component.

0 of 5 done

Example

Server page, client button

This example shows a hackathon project card rendered by a Server Component. Only the like button runs in the browser.

// app/projects/page.tsx
import LikeButton from '@/components/LikeButton'

const project = {
  id: 'upi-splitter',
  name: 'UPI Splitter',
  team: 'Team NIT Weekend',
  likes: 12,
}

export default function ProjectsPage() {
  return (
    <main className="p-6">
      <h1 className="text-2xl font-bold">Projects</h1>
      <article className="mt-4 rounded border p-4">
        <h2 className="text-xl">{project.name}</h2>
        <p className="text-sm text-gray-600">{project.team}</p>
        <LikeButton initialLikes={project.likes} />
      </article>
    </main>
  )
}

// components/LikeButton.tsx
'use client'

import { useState } from 'react'

type LikeButtonProps = {
  initialLikes: number
}

export default function LikeButton({ initialLikes }: LikeButtonProps) {
  const [likes, setLikes] = useState(initialLikes)

  return (
    <button
      className="mt-3 rounded bg-black px-4 py-2 text-white"
      onClick={() => setLikes(likes + 1)}
    >
      Like project ({likes})
    </button>
  )
}

Common mistake

Do not client everything

A common beginner move is adding 'use client' to app/layout.tsx or every page because one button needs useState. That sends more code to the browser than needed.

Older tutorials may do this. In App Router, mark the smallest interactive component instead.

Tip

Use AI carefully

If you ask an AI tool to build a component, tell it: “Use Next.js App Router. Keep the page as a Server Component. Put interactivity in a small Client Component.”

Check the answer. 'use client' must be the first statement in the client file. The Server Component should not use useState, useEffect, onClick, window, or localStorage.

Props must be simple

You can pass data from a Server Component to a Client Component using props. But those props must be serializable by React.

Good props: project name, initial count, list of tags. Bad props: functions, database clients, class instances, or secret values.