When will you use this?

Reach for data fetching and Server Actions when pages need database content or form submissions.

• Enrollments, quiz scores, and course progress load from the server — often with Server Actions.
• Forms that enroll a student in a course use Server Actions instead of a separate REST call.

Real-world: LearnHub LMS

The EdTech / LMS team building LearnHub LMS uses Middleware to redirect guests away from /dashboard before the page renders. students and instructors never see the TypeScript files — they just get a fast, reliable course catalog, lesson player, and progress tracking.

Production-style code

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

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

export const config = { matcher: ['/dashboard/:path*'] };

What happens in production: In LearnHub LMS, getting Middleware right means students and instructors trust the course catalog, lesson player, and progress tracking every day.

Lesson example (start here)

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

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const session = request.cookies.get('session')?.value;

  if (!session && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: ['/dashboard/:path*', '/instructor/:path*']
};

Line-by-line walkthrough

How it works (big picture)

• matcher limits which paths run middleware.
• redirect sends 307 to login.
• next() continues normally for signed-in users.

Do this on your computer

1. Create middleware.ts at project root (or src/)
2. Set a fake session cookie in browser devtools
3. Visit /dashboard logged out — confirm redirect
4. Add instructor path to matcher
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.
• Use npm run dev while editing Middleware — the page hot-reloads on save.

Remember

middleware.ts runs before routes. Use for auth redirects and headers. matcher controls scope.

Common questions