When will you use this?

You need this before writing any Next.js code — same as installing Node.js before opening a project.

• Every React/Next.js job expects you to run npx create-next-app and npm run dev on day one.
• Interviewers often ask you to explain the App Router folder structure and Server vs Client Components.

Real-world: HDFC-style banking dashboard

The Banking team building HDFC-style banking dashboard uses Server Components to load course data on the server so students get HTML fast. account holders never see the TypeScript files — they just get a fast, reliable accounts, transfers, and statement views.

Production-style code

// app/courses/page.tsx — Server Component (default)
async function getCourses() {
  const res = await fetch('https://api.example.com/courses', {
    next: { revalidate: 60 }
  });
  return res.json();
}

export default async function CoursesPage() {
  const courses = await getCourses();
  return (
    <ul>
      {courses.map((c: { id: string; title: string }) => (
        <li key={c.id}>{c.title}</li>
      ))}
    </ul>
  );
}

What happens in production: In HDFC-style banking dashboard, getting Server Components right means account holders trust the accounts, transfers, and statement views every day.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

// app/courses/page.tsx — Server Component (no "use client")
async function getCourses() {
  const res = await fetch('https://api.example.com/courses', {
    next: { revalidate: 60 }
  });
  if (!res.ok) throw new Error('Failed to load courses');
  return res.json() as Promise<{ id: string; title: string }[]>;
}

export default async function CoursesPage() {
  const courses = await getCourses();
  return (
    <ul>
      {courses.map((c) => (
        <li key={c.id}>{c.title}</li>
      ))}
    </ul>
  );
}

Line-by-line walkthrough

How it works (big picture)

• async function page can await fetch.
• Data loads before HTML is sent.
• API keys in fetch stay server-side.
• revalidate: 60 enables ISR-style refresh every minute.

Do this on your computer

1. Make a page async and await fetch to a public API
2. View page source — content is in HTML
3. Compare bundle size mindset: no useEffect needed for first paint
4. Pass course data as props into a Client Component button
5. Read the real-world section and name which part of LearnHub uses this topic.
6. Run the example locally with npm run dev and confirm the same behavior.
7. Change one value in the example (route, text, or course id) and predict what will happen before you save.

Experiments — try changing this

• Change a string or route in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error overlay, then fix it.
• Change the API URL or course id and see how the page data changes.

Remember

Default = Server Component. await data directly in the page. Pass serializable props to Client children.

Common questions