When will you use this?

You use layouts and styling in every page you build from your first screen to production.

• Course catalogs, lesson sidebars, and instructor dashboards all use layouts and shared navigation.
• When a student opens a lesson page, nested layouts keep the header and progress bar consistent.

Real-world: HDFC-style banking dashboard

The Banking team building HDFC-style banking dashboard uses Forms in Next.js to build sign-up, contact, and enrollment forms that work with Server Actions. account holders never see the TypeScript files — they just get a fast, reliable accounts, transfers, and statement views.

Production-style code

import { enrollInCourse } from '@/actions/enroll';

export default function EnrollForm({ courseId }: { courseId: string }) {
  return (
    <form action={enrollInCourse}>
      <input type="hidden" name="courseId" value={courseId} />
      <button type="submit">Enroll now</button>
    </form>
  );
}

What happens in production: In HDFC-style banking dashboard, getting Forms in Next.js 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.

import { enrollInCourse } from '@/actions/enroll';

export default function EnrollForm({ courseId }: { courseId: string }) {
  return (
    <form action={enrollInCourse}>
      <input type="hidden" name="courseId" value={courseId} />
      <button type="submit">Enroll now</button>
    </form>
  );
}

Line-by-line walkthrough

How it works (big picture)

• hidden input passes courseId as FormData.
• Server Action receives formData.get("courseId").
• No onSubmit fetch needed for the basic flow.

Do this on your computer

1. Build enroll form with Server Action
2. Add pending UI with useFormStatus in a child Client button
3. Try submit with JS disabled in browser devtools
4. Add a textarea contact form on /support
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.

Remember

form action wires to Server Actions. name attributes map to FormData keys. Enhance with Client Components for UX.

Common questions