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: NewsDaily portal

The Media team building NewsDaily portal uses Authentication Basics to know who is logged in before showing paid lesson content. readers and editors never see the TypeScript files — they just get a fast, reliable article pages, categories, and SEO metadata.

Production-style code

// Conceptual flow — full NextAuth in later lessons
// 1. User submits email/password
// 2. Server verifies credentials
// 3. Session cookie or JWT issued
// 4. Dashboard reads session — shows enrolled courses

// middleware.ts (preview)
export function middleware(request: NextRequest) {
  const session = request.cookies.get('session');
  if (!session && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
}

What happens in production: In NewsDaily portal, getting Authentication Basics right means readers and editors trust the article pages, categories, and SEO metadata every day.

Lesson example (start here)

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

// Conceptual flow — full NextAuth in later lessons
// 1. User submits email/password
// 2. Server verifies credentials
// 3. Session cookie or JWT issued
// 4. Dashboard reads session — shows enrolled courses

// middleware.ts (preview)
export function middleware(request: NextRequest) {
  const session = request.cookies.get('session');
  if (!session && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
}

Line-by-line walkthrough

How it works (big picture)

• This lesson is concepts before tools.
• Cookies carry session id.
• Middleware blocks guests early.
• Later lessons add NextAuth and protected layouts.

Do this on your computer

1. List LearnHub routes that need auth vs public
2. Sketch login → session → dashboard on paper
3. Read middleware preview above
4. Prepare .env.local for auth secrets in next lessons
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

Auth = identity; authorization = permissions. Sessions via secure cookies common in Next.js. Protect on server and middleware.

Common questions