Next.js 15 Fullstack Web Apps · 강의

요청 유효성 검사와 보안

입력값을 검증하고 일반적인 취약점으로부터 API 경로를 보호합니다.

요청 유효성 검사와 보안은(는) CoddyKit의 무료 Next.js 15 Fullstack Web Apps 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Next.js 15 Fullstack Web Apps 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Next.js 15 Fullstack Web Apps 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

Why Validate & Secure Requests?

When building web applications, especially with API routes, you'll receive data from users. This data often comes from forms, client-side requests, or other external sources.

It's crucial to ensure this incoming data is valid and safe. Without proper validation and security measures, your application can be vulnerable to errors, data corruption, or even malicious attacks.

What is Input Validation?

Input validation is the process of ensuring that data provided by a user (or another system) meets specific criteria before your application processes it. This involves checking:

Data Type: Is it a string, number, boolean?
Format: Does an email address look like an email? Is a date in the correct format?
Length: Is a username between 3 and 20 characters?
Range: Is an age a positive number?
Content: Does it contain only allowed characters?

Client vs. Server-Side Validation

You might perform validation on the client-side (in the browser) for a better user experience, providing instant feedback.

However, server-side validation is non-negotiable for security and data integrity. Client-side validation can be bypassed by malicious users. Always validate data on your server before processing it or storing it in a database.

Introducing Zod for Validation

Zod is a popular TypeScript-first schema declaration and validation library. It allows you to define the expected shape and types of your data, then validate incoming data against that schema.

Key benefits:

Type Safety: Infers types from your schemas.
Robust: Handles complex validation rules.
Developer Friendly: Easy to read and write.

Basic Zod Schema Example

Let's see how to define a simple Zod schema for user input. This example checks for a valid username, email, and age.

Try running it with both valid and invalid data.

const { z } = require('zod');

const UserSchema = z.object({
  username: z.string().min(3, "Username too short"),
  email: z.string().email("Invalid email format"),
  age: z.number().int().positive("Age must be positive"),
});

const validData = {
  username: "coddyuser",
  email: "coddy@example.com",
  age: 30,
};

const invalidData = {
  username: "co",
  email: "bad-email",
  age: -10,
};

console.log("--- Valid Data Test ---");
try {
  const parsed = UserSchema.parse(validData);
  console.log("Valid data:", parsed);
} catch (error) {
  console.error("Validation failed:", error.errors);
}

console.log("\n--- Invalid Data Test ---");
try {
  const parsed = UserSchema.parse(invalidData);
  console.log("Valid data:", parsed);
} catch (error) {
  console.error("Validation failed:", error.errors);
}

Integrating Zod in Route Handlers

In Next.js, you'll use Zod within your API Route Handlers (e.g., app/api/users/route.ts) to validate incoming request bodies. This ensures that any data sent to your API meets your expectations before further processing.

We typically use a try-catch block to handle potential validation errors.

import { NextResponse } from 'next/server';
import { z } from 'zod';

// Define the schema for creating a new post
const CreatePostSchema = z.object({
  title: z.string().min(5, 'Title must be at least 5 characters.'),
  content: z.string().min(10, 'Content must be at least 10 characters.'),
  authorId: z.string().uuid('Author ID must be a valid UUID.'),
});

export async function POST(request: Request) {
  try {
    const body = await request.json();

    // Validate the request body using Zod
    const validatedData = CreatePostSchema.parse(body);

    // If validation passes, proceed with your logic
    // e.g., save to database, perform other operations
    console.log('Received valid post data:', validatedData);

    return NextResponse.json(
      { message: 'Post created successfully', data: validatedData },
      { status: 201 }
    );
  } catch (error) {
    // We'll handle errors in the next scene!
    return NextResponse.json(
      { message: 'An unexpected error occurred.' },
      { status: 500 }
    );
  }
}

Handling Validation Errors Gracefully

When Zod validation fails, it throws a ZodError. It's important to catch this specific error and return a clear, informative response to the client, typically with an HTTP 400 Bad Request status code.

This helps client applications understand what went wrong and display appropriate messages to users.

import { NextResponse } from 'next/server';
import { z } from 'zod';

const CreatePostSchema = z.object({
  title: z.string().min(5, 'Title must be at least 5 characters.'),
  content: z.string().min(10, 'Content must be at least 10 characters.'),
  authorId: z.string().uuid('Author ID must be a valid UUID.'),
});

export async function POST(request: Request) {
  try {
    const body = await request.json();
    const validatedData = CreatePostSchema.parse(body);

    console.log('Received valid post data:', validatedData);

    return NextResponse.json(
      { message: 'Post created successfully', data: validatedData },
      { status: 201 }
    );
  } catch (error) {
    // Catch ZodError specifically for validation failures
    if (error instanceof z.ZodError) {
      console.error('Validation failed:', error.errors);
      return NextResponse.json(
        { message: 'Validation failed', errors: error.errors },
        { status: 400 }
      );
    }
    // Handle other unexpected errors
    console.error('Server error:', error);
    return NextResponse.json(
      { message: 'Internal server error' },
      { status: 500 }
    );
  }
}

Beyond Validation: Sanitization

While validation checks if data is *correct*, sanitization cleans or modifies data to remove potentially harmful elements. This is especially important for text inputs that will be displayed in a browser.

For example, removing HTML tags from user-submitted comments helps prevent Cross-Site Scripting (XSS) attacks, where malicious scripts could be injected and executed in other users' browsers.

General API Security Best Practices

Beyond input validation and sanitization, consider these practices for robust API security:

Use HTTPS: Encrypt all communication.
Implement Authentication & Authorization: Ensure only legitimate, authorized users can access specific endpoints.
Rate Limiting: Prevent abuse and brute-force attacks by limiting the number of requests a client can make over time.
CORS Policies: Configure Cross-Origin Resource Sharing (CORS) headers to control which domains can access your API.
Error Hiding: Avoid revealing sensitive information in error messages (e.g., stack traces).

Validation Quick Check

You're building a Next.js API route to receive user sign-up data. Which of the following is the most critical reason to perform server-side input validation, even if client-side validation is already in place?

Recap: Validate & Secure Your APIs

Great job! You've learned the importance of input validation and security for Next.js API routes.

Always validate server-side to protect your application.
Zod is a powerful tool for defining and enforcing data schemas.
Handle validation errors gracefully with 400 Bad Request responses.
Remember to sanitize inputs and follow general API security best practices.

These steps are fundamental to building robust and secure fullstack Next.js applications!

자주 묻는 질문

“요청 유효성 검사와 보안” 강의는 무료인가요?

네 — “요청 유효성 검사와 보안” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Next.js 15 Fullstack Web Apps 강의 전체를 잠금 해제할 수 있습니다. Next.js 15 Fullstack Web Apps 강의에는 총 4개의 강의가 포함되어 있습니다.

“요청 유효성 검사와 보안”에서 뭘 배우나요?

입력값을 검증하고 일반적인 취약점으로부터 API 경로를 보호합니다. 브라우저에서 직접 실행하는 실습 코드로 Next.js 15 Fullstack Web Apps을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Next.js 15 Fullstack Web Apps을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Next.js 15 Fullstack Web Apps은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“요청 유효성 검사와 보안” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Next.js 15 Fullstack Web Apps 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Next.js 15 Fullstack Web Apps 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Next.js 15 Fullstack Web Apps(으)로 돌아가기