0Pricing
Next.js 15 Fullstack (App Router + Server Actions) · Leçon

Protéger les routes et les données

Implémentez un intergiciel et des vérifications côté serveur pour protéger certaines routes et données selon l’état d’authentification de l’utilisateur.

Protéger les routes et les données est une leçon Next.js 15 Fullstack (App Router + Server Actions) gratuite sur CoddyKit. Ceci est la leçon 3 sur 6. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Next.js 15 Fullstack (App Router + Server Actions), et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Next.js 15 Fullstack (App Router + Server Actions) comprend 6 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

Why Protect Routes & Data?

In any application, not all information or features should be accessible to everyone. Protecting routes and data is crucial for security.

  • Route Protection: Prevents unauthorized users from even reaching certain pages (e.g., an admin dashboard).
  • Data Protection: Ensures users can only view or modify data they are authorized to access (e.g., a user's own profile, not someone else's).

This lesson explores how Next.js helps you enforce these rules on the server side.

Introducing Next.js Middleware

Next.js Middleware allows you to run code before a request is completed. It's like a gatekeeper for your application.

Middleware runs on the Edge Runtime, providing extremely fast execution. It can:

  • Redirect users to different pages.
  • Rewrite URLs.
  • Add/modify request or response headers.
  • Perform authentication checks.

Setting Up Middleware

To use middleware, create a file named middleware.ts (or .js) at the root of your project or within the src or app directory.

This file exports a function that receives the incoming request and returns a response.

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

export function middleware(request: NextRequest) {
  // Your protection logic goes here
  console.log('Middleware executed for:', request.url);
  return NextResponse.next();
}

// Configure which paths the middleware applies to
export const config = {
  matcher: ['/dashboard/:path*', '/profile'],
};

Redirecting Unauthorized Users

A common use case for middleware is to redirect users who are not authenticated away from protected routes.

You can check for an authentication token or session cookie and, if missing, redirect them to a login page.

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

export function middleware(request: NextRequest) {
  const isAuthenticated = request.cookies.has('session_token');
  const isLoginPage = request.nextUrl.pathname.startsWith('/login');

  if (!isAuthenticated && !isLoginPage) {
    const url = request.nextUrl.clone();
    url.pathname = '/login';
    return NextResponse.redirect(url);
  }

  return NextResponse.next();
}

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

Server-Side Data Checks

While middleware protects routes, you also need to protect the data itself. A user might bypass client-side checks or try to access data via an API.

Always perform authorization checks directly within your Server Components, Server Actions, or API routes before fetching or mutating sensitive data.

  • Middleware: Route-level access control.
  • Server Components/Actions: Data-level access control.

Protecting Data in Server Components

Inside a Server Component, you can check the user's authentication status and roles to decide what data to fetch or display.

If the user isn't authorized, you might redirect them, show an 'Access Denied' message, or simply not render sensitive parts of the UI.

import { redirect } from 'next/navigation';
// Assume 'getUserSession' is a helper function
// that retrieves the current user's session from cookies/headers.
async function getUserSession() {
  // In a real app, this would securely fetch session details.
  // For demo, let's simulate a check.
  const hasSessionCookie = true; // Check request headers for auth cookie
  return hasSessionCookie ? { id: 'user123', name: 'Alice' } : null;
}

export default async function ProtectedDashboard() {
  const user = await getUserSession();

  if (!user) {
    redirect('/login'); // Use next/navigation's redirect for Server Components
  }

  return (
    <div>
      <h1>Welcome, {user.name}!</h1>
      <p>This is your confidential dashboard content.</p>
    </div>
  );
}

Protecting Data with Server Actions

Server Actions are powerful for handling form submissions and data mutations. It's critical to include authorization checks within them.

Before performing any database operations or sensitive logic, verify that the user initiating the action has the necessary permissions.

import { revalidatePath } from 'next/cache';

// Assume 'getCurrentUser' gets the user initiating the action
// and 'isAdmin' checks their role.
async function getCurrentUser() {
  // Simulate fetching user from session/context
  return { id: 'user123', role: 'admin' }; // Or 'guest'
}

async function createProduct(formData: FormData) {
  'use server';

  const user = await getCurrentUser();
  if (!user || user.role !== 'admin') {
    throw new Error('Unauthorized: Only admins can create products.');
  }

  const productName = formData.get('name') as string;
  // Simulate database operation
  console.log(`Admin ${user.id} created product: ${productName}`);
  // await db.products.create({ data: { name: productName } });

  revalidatePath('/admin/products');
  return { success: true, message: 'Product created!' };
}

export default function ProductForm() {
  return (
    <form action={createProduct}>
      <input type="text" name="name" placeholder="Product Name" required />
      <button type="submit">Create Product</button>
    </form>
  );
}

Handling Access Denied

When a user is unauthorized, you need to provide clear feedback. This can be:

  • Redirecting: To a login page or an 'Access Denied' page.
  • Displaying an error: Showing a message directly on the page.
  • Throwing an error: Allowing Next.js error.js boundaries to catch it.

Choose the method that best fits the user experience and the severity of the access attempt.

Defense in Depth

The best security approach is 'defense in depth'. This means applying multiple layers of security checks.

  • Client-side: Hide UI elements (not for security, but UX).
  • Middleware: Protect entire routes.
  • Server Components/Actions: Protect specific data operations.
  • Database: Use database-level permissions where appropriate.

Never trust client-side checks alone; always validate on the server.

Best Practices Summary

To ensure robust security for your Next.js application:

  • Always Authenticate & Authorize: Verify user identity and permissions for every sensitive operation.
  • Use Environment Variables: Store secrets (e.g., database credentials) securely.
  • Sanitize Inputs: Prevent injection attacks by validating and sanitizing all user input.
  • Least Privilege: Grant users only the minimum permissions they need.

Quick Check: Route Protection

You want to prevent unauthenticated users from accessing any page under /admin. Where should the primary check for this be implemented?

Recap: Protecting Your App

You've learned how to secure your Next.js 15 application using a multi-layered approach:

  • Middleware: Guards entire routes, redirecting unauthorized users.
  • Server Components: Conditionally render UI or redirect based on user authorization.
  • Server Actions: Protect data mutations by verifying user permissions before execution.

Combining these techniques provides robust protection for both your routes and the sensitive data within your application.

Questions Fréquemment Posées

La leçon « Protéger les routes et les données » est-elle gratuite ?

Oui — le texte complet de « Protéger les routes et les données » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Next.js 15 Fullstack (App Router + Server Actions), passe à CoddyKit PRO. Le cours Next.js 15 Fullstack (App Router + Server Actions) comprend 6 leçons au total.

Qu'est-ce que j'apprendrai dans « Protéger les routes et les données » ?

Implémentez un intergiciel et des vérifications côté serveur pour protéger certaines routes et données selon l’état d’authentification de l’utilisateur. Tu pratiques Next.js 15 Fullstack (App Router + Server Actions) avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Next.js 15 Fullstack (App Router + Server Actions) ?

Aucune expérience préalable n'est requise. Next.js 15 Fullstack (App Router + Server Actions) sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 6.

Combien de temps prend la leçon « Protéger les routes et les données » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Next.js 15 Fullstack (App Router + Server Actions) ?

Oui. Chaque leçon Next.js 15 Fullstack (App Router + Server Actions) inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Intégrer NextAuth.js
  2. Mise en œuvre d’une stratégie JWT
  3. Protéger les routes et les données
  4. Gardes et rôles
  5. Stratégies d’authentification personnalisées
  6. Intégration de Passport.js
← Retour à Next.js 15 Fullstack (App Router + Server Actions)