Next.js - lesson 4 | HackIndia Skills

Next.js - lesson 4 | HackIndia Skills | HackIndia

Example

Server page fetch

This example creates a projects page that fetches data on the server. The page component is async, then it awaits fetch and renders the result.

Replace the URL with your real API later. The shape of the data must match what you render.

// app/projects/page.tsx
type Project = {
  id: number
  name: string
  city: string
}

async function getProjects() {
  const res = await fetch('https://example.com/api/projects')

  if (!res.ok) {
    throw new Error('Failed to load projects')
  }

  return res.json() as Promise<Project[]>
}

export default async function ProjectsPage() {
  const projects = await getProjects()

  return (
    <main className="p-6">
      <h1 className="text-2xl font-bold">Student projects</h1>
      <ul className="mt-4 space-y-3">
        {projects.map((project) => (
          <li key={project.id} className="rounded border p-3">
            <p className="font-medium">{project.name}</p>
            <p className="text-sm text-gray-600">{project.city}</p>
          </li>
        ))}
      </ul>
    </main>
  )
}

Fetch data on the server

Main idea

Why server fetch

Choose one data source

Server page fetch

Ask AI well

Common wrong turn

Caching note

Do this now

Quick check