Next.js - lesson 3 | HackIndia Skills

Next.js - lesson 3 | HackIndia Skills | HackIndia

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>
  )
}

Split server and client components

One split rule

Default is server

Choose the side

Server page, client button

Do not client everything

Use AI carefully

Props must be simple

Do this now

Quick check