When will you use this?

Use when you are ready to put LearnHub online for users or employers to try.

• Publishing means pushing LearnHub to Vercel, Docker, or Azure so students can access it online.
• CI/CD runs npm test and npm run build automatically on every git push.

Real-world: Flipkart-style catalog

The E-commerce team building Flipkart-style catalog uses Protected Routes to apply Protected Routes when building search, filters, and fast product listing pages. shoppers never see the TypeScript files — they just get a fast, reliable search, filters, and fast product listing pages.

Production-style code

// app/dashboard/layout.tsx
import { redirect } from 'next/navigation';
import { getServerSession } from 'next-auth';
import { authOptions } from '@/lib/auth';

export default async function DashboardLayout({
  children
}: { children: React.ReactNode }) {
  const session = await getServerSession(authOptions);
  if (!session) redirect('/login');
  return <section className="dashboard-shell">{children}</section>;
}

What happens in production: In Flipkart-style catalog, getting Protected Routes right means shoppers trust the search, filters, and fast product listing pages every day.

Lesson example (start here)

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

// app/dashboard/layout.tsx
import { redirect } from 'next/navigation';
import { getServerSession } from 'next-auth';
import { authOptions } from '@/lib/auth';

export default async function DashboardLayout({
  children
}: { children: React.ReactNode }) {
  const session = await getServerSession(authOptions);
  if (!session) redirect('/login');
  return <section className="dashboard-shell">{children}</section>;
}

Line-by-line walkthrough

How it works (big picture)

• Layout runs on the server before children render.
• No session means immediate redirect — the dashboard HTML never leaks to guests.

Do this on your computer

1. Add auth check to dashboard layout.
2. Visit /dashboard logged out — confirm redirect.
3. Log in and confirm access.
4. Add role check for /instructor routes.
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.
• Use npm run dev while editing Protected Routes — the page hot-reloads on save.

Remember

Protect on the server first. Use middleware for broad path rules. Use layout session checks for nested dashboard areas.

Common questions