Next.js 15 Fullstack Web Apps · บทเรียน

มิดเดิลแวร์และการควบคุมการเข้าถึง

ปกป้องเส้นทางและจุดปลายทาง API โดยใช้มิดเดิลแวร์ของ Next.js เพื่อการอนุญาตและการเปลี่ยนเส้นทาง

มิดเดิลแวร์และการควบคุมการเข้าถึง เป็นบทเรียน Next.js 15 Fullstack Web Apps ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Next.js 15 Fullstack Web Apps และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Next.js 15 Fullstack Web Apps มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Intercepting Requests with Middleware

Welcome to Lesson 3! In this lesson, we'll explore Next.js Middleware. Think of middleware as a gatekeeper for your application.

It allows you to run code before a request is completed, letting you inspect, modify, or even redirect requests based on certain conditions. This is super useful for access control!

Creating Your First Middleware

To create middleware, you simply add a middleware.ts (or .js) file at the root of your project, or inside the src directory.

This file must export a default function that takes a NextRequest object and returns a NextResponse. Let's create a basic one:

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

export function middleware(request: NextRequest) {
  console.log('Middleware is running!');
  // Continue to the requested page
  return NextResponse.next();
}

Basic Redirection for Access Control

A common use case for middleware is to protect routes. For example, you might want to redirect users who aren't logged in away from a dashboard page.

Here, we'll simulate checking for an 'auth_token' cookie. If it's missing, we redirect the user to the homepage.

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

export function middleware(request: NextRequest) {
  const isAuthenticated = request.cookies.has('auth_token');
  const { pathname } = request.nextUrl;

  // If not authenticated and trying to access /dashboard
  if (!isAuthenticated && pathname.startsWith('/dashboard')) {
    console.log('User not authenticated, redirecting...');
    return NextResponse.redirect(new URL('/', request.url));
  }

  return NextResponse.next();
}

Defining Middleware Scope with `matcher`

By default, middleware runs on every request. This isn't always efficient. You can specify which paths your middleware should run on using the config.matcher property.

The matcher is an array of strings that define path patterns. It's more powerful and recommended than conditional logic inside the middleware function for path filtering.

Using `matcher` for Specific Paths

Let's update our middleware to only run on paths that start with /dashboard or /profile. This makes our middleware more performant by not running on unnecessary routes.

/dashboard/:path* matches /dashboard and any sub-paths like /dashboard/settings.
/profile/:path* matches /profile and its sub-paths.

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

export function middleware(request: NextRequest) {
  const isAuthenticated = request.cookies.has('auth_token');

  if (!isAuthenticated) {
    console.log('Not authenticated, redirecting to home.');
    return NextResponse.redirect(new URL('/', request.url));
  }

  return NextResponse.next();
}

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

Reading & Modifying Request Headers

Middleware can also read and modify request headers. This is useful for passing information down to your pages or API routes, or for adding security headers.

The NextRequest object provides methods to interact with headers, cookies, and the URL.

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

export function middleware(request: NextRequest) {
  const requestHeaders = new Headers(request.headers);
  const userAgent = requestHeaders.get('user-agent');
  console.log('User-Agent:', userAgent);

  // Add a custom header
  requestHeaders.set('x-custom-header', 'Hello from Middleware');

  // Return a new response with modified headers
  return NextResponse.next({
    request: { headers: requestHeaders },
  });
}

Protecting API Routes with Middleware

Middleware applies to all routes in your application, including API routes (e.g., /api/users). This is a powerful feature for implementing API authentication and authorization.

You can check for API keys, JWTs, or session tokens in the request headers or cookies before allowing access to your API endpoints.

Authorization vs. Authentication

It's important to distinguish between Authentication (AuthN) and Authorization (AuthZ):

Authentication: Verifies who a user is (e.g., by checking their login credentials).
Authorization: Determines what an authenticated user is allowed to do (e.g., access admin pages, delete content).

Middleware can enforce both, by checking if a user is logged in (AuthN) and if they have the necessary roles/permissions (AuthZ) before granting access to a route.

Advanced Authorization Example

Let's combine concepts for a more advanced scenario: checking for an 'admin' role. We'll simulate reading a user role from a cookie and redirecting non-admin users from an /admin path.

This shows how middleware acts as a central point for access control logic.

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

export function middleware(request: NextRequest) {
  const userRole = request.cookies.get('user_role')?.value;
  const { pathname } = request.nextUrl;

  // If trying to access /admin routes
  if (pathname.startsWith('/admin')) {
    // Check if user has 'admin' role
    if (userRole !== 'admin') {
      console.log('Access denied: User is not an admin, redirecting.');
      return NextResponse.redirect(new URL('/unauthorized', request.url));
    }
  }

  return NextResponse.next();
}

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

Middleware Matching Challenge

Consider the following config.matcher. Which of these paths WILL be processed by the middleware?

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

Recap: Middleware for Control

You've learned how Next.js Middleware acts as a powerful interceptor for incoming requests.

It's defined in a middleware.ts file.
It can redirect users, modify requests/responses, and add headers.
The config.matcher is essential for defining which routes your middleware should protect.
It's crucial for implementing both authentication and authorization logic across your application, including API routes.

Middleware gives you fine-grained control over access and behavior!

คำถามที่พบบ่อย

บทเรียน “มิดเดิลแวร์และการควบคุมการเข้าถึง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “มิดเดิลแวร์และการควบคุมการเข้าถึง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Next.js 15 Fullstack Web Apps ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Next.js 15 Fullstack Web Apps มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “มิดเดิลแวร์และการควบคุมการเข้าถึง”

ปกป้องเส้นทางและจุดปลายทาง API โดยใช้มิดเดิลแวร์ของ Next.js เพื่อการอนุญาตและการเปลี่ยนเส้นทาง คุณปฏิบัติ Next.js 15 Fullstack Web Apps ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Next.js 15 Fullstack Web Apps หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Next.js 15 Fullstack Web Apps บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “มิดเดิลแวร์และการควบคุมการเข้าถึง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Next.js 15 Fullstack Web Apps นี้ได้ไหม

ได้ บทเรียน Next.js 15 Fullstack Web Apps ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Next.js 15 Fullstack Web Apps