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: Naukri-style job board

The Recruitment team building Naukri-style job board uses Server Actions to enroll a student or mark a lesson complete with a form post — no separate API route. job seekers and recruiters never see the TypeScript files — they just get a fast, reliable job search, apply forms, and employer dashboards.

Production-style code

'use server';

import { revalidatePath } from 'next/cache';

export async function enrollInCourse(formData: FormData) {
  const courseId = formData.get('courseId') as string;
  await fetch(`${process.env.API_URL}/enroll`, {
    method: 'POST',
    body: JSON.stringify({ courseId }),
    headers: { 'Content-Type': 'application/json' }
  });
  revalidatePath('/dashboard');
}

What happens in production: In Naukri-style job board, getting Server Actions right means job seekers and recruiters trust the job search, apply forms, and employer dashboards every day.

Lesson example (start here)

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

'use server';

import { revalidatePath } from 'next/cache';

export async function enrollInCourse(formData: FormData) {
  const courseId = formData.get('courseId');
  if (!courseId || typeof courseId !== 'string') {
    return { error: 'Invalid course' };
  }

  await fetch(`${process.env.API_URL}/enroll`, {
    method: 'POST',
    body: JSON.stringify({ courseId }),
    headers: { 'Content-Type': 'application/json' }
  });

  revalidatePath('/dashboard');
  return { success: true };
}

Line-by-line walkthrough

How it works (big picture)

• Form action={enrollInCourse} posts FormData to the server function.
• revalidatePath refreshes dashboard cache.
• Return values can update UI via useFormState in Client Components.

Do this on your computer

1. Create actions/enroll.ts with "use server"
2. Wire a form with action={enrollInCourse} and hidden courseId
3. Submit and confirm dashboard updates
4. Add basic error return for missing courseId
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

"use server" = server-only mutation. Works with

Common questions