Next.js 15 Fullstack (App Router + Server Actions) · Pelajaran

Melindungi Rute & Data

Implementasikan perantara dan pemeriksaan sisi server untuk melindungi rute serta data tertentu berdasarkan status autentikasi pengguna.

Pelajaran 3 dari 612 langkah

Melindungi Rute & Data adalah pelajaran Next.js 15 Fullstack (App Router + Server Actions) gratis di CoddyKit. Ini adalah pelajaran 3 dari 6. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Next.js 15 Fullstack (App Router + Server Actions), dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Next.js 15 Fullstack (App Router + Server Actions) mencakup 6 pelajaran total.

Mengapa Melindungi Rute & Data?

Dalam aplikasi apa pun, tidak semua informasi atau fitur boleh dapat diakses oleh semua orang. Melindungi rute dan data sangat penting untuk keamanan.

Perlindungan Rute: Mencegah pengguna yang tidak berwenang bahkan mencapai halaman tertentu (misalnya, dasbor admin).
Perlindungan Data: Memastikan pengguna hanya dapat melihat atau mengubah data yang boleh mereka akses (misalnya, profil milik mereka sendiri, bukan milik orang lain).

Pelajaran ini membahas cara Next.js membantu Anda menegakkan aturan tersebut di sisi server.

Memperkenalkan Middleware Next.js

Middleware Next.js memungkinkan Anda menjalankan kode sebelum suatu permintaan selesai. Middleware ini seperti penjaga gerbang untuk aplikasi Anda.

Middleware berjalan di Edge Runtime, sehingga eksekusinya sangat cepat. Middleware dapat:

Mengarahkan pengguna ke halaman lain.
Menulis ulang URL.
Menambahkan atau mengubah header permintaan atau respons.
Melakukan pemeriksaan autentikasi.

Menyiapkan Middleware

Untuk menggunakan middleware, buat file bernama middleware.ts (atau .js) di akar proyek Anda atau di dalam direktori src atau app.

File ini mengekspor fungsi yang menerima permintaan masuk dan mengembalikan respons.

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'],
};

Mengarahkan Pengguna yang Tidak Berwenang

Salah satu penggunaan middleware yang umum adalah mengarahkan pengguna yang belum terautentikasi agar tidak mengakses rute yang dilindungi.

Anda dapat memeriksa token autentikasi atau cookie sesi, lalu, jika tidak ada, mengarahkan mereka ke halaman masuk.

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'],
};

Pemeriksaan Data di Sisi Server

Meskipun middleware melindungi rute, Anda juga perlu melindungi data itu sendiri. Pengguna mungkin melewati pemeriksaan di sisi klien atau mencoba mengakses data melalui API.

Selalu lakukan pemeriksaan otorisasi langsung di dalam Komponen Server, Aksi Server, atau rute API sebelum mengambil atau mengubah data sensitif.

Middleware: Kontrol akses tingkat rute.
Komponen/Aksi Server: Kontrol akses tingkat data.

Melindungi Data dalam Komponen Server

Di dalam Komponen Server, Anda dapat memeriksa status autentikasi dan peran pengguna untuk menentukan data yang akan diambil atau ditampilkan.

Jika pengguna tidak berwenang, Anda dapat mengarahkan mereka, menampilkan pesan 'Akses Ditolak', atau tidak merender bagian UI yang sensitif.

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>
  );
}

Melindungi Data dengan Aksi Server

Aksi Server sangat berguna untuk menangani pengiriman formulir dan perubahan data. Sangat penting untuk menyertakan pemeriksaan otorisasi di dalamnya.

Sebelum melakukan operasi basis data atau logika sensitif, pastikan pengguna yang memulai tindakan memiliki izin yang diperlukan.

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>
  );
}

Menangani Akses Ditolak

Saat pengguna tidak berwenang, Anda perlu memberikan umpan balik yang jelas. Bentuknya dapat berupa:

Pengarahan: Ke halaman masuk atau halaman 'Akses Ditolak'.
Menampilkan kesalahan: Menampilkan pesan langsung di halaman.
Melemparkan kesalahan: Membiarkan batas error.js Next.js menangkapnya.

Pilih metode yang paling sesuai dengan pengalaman pengguna dan tingkat keparahan upaya akses tersebut.

Pertahanan Berlapis

Pendekatan keamanan terbaik adalah 'pertahanan berlapis'. Artinya, menerapkan beberapa lapisan pemeriksaan keamanan.

Sisi Klien: Menyembunyikan elemen UI (bukan untuk keamanan, melainkan untuk pengalaman pengguna).
Middleware: Melindungi seluruh rute.
Komponen/Aksi Server: Melindungi operasi data tertentu.
Basis Data: Menggunakan izin tingkat basis data jika sesuai.

Jangan pernah hanya mengandalkan pemeriksaan di sisi klien; selalu lakukan validasi di server.

Ringkasan Praktik Terbaik

Untuk memastikan keamanan yang tangguh pada aplikasi Next.js Anda:

Selalu Lakukan Autentikasi & Otorisasi: Verifikasi identitas dan izin pengguna untuk setiap operasi sensitif.
Gunakan Variabel Lingkungan: Simpan rahasia (misalnya, kredensial basis data) dengan aman.
Bersihkan Input: Cegah serangan injeksi dengan memvalidasi dan membersihkan semua input pengguna.
Hak Akses Minimum: Berikan pengguna hanya izin minimum yang mereka perlukan.

Pemeriksaan Cepat: Perlindungan Rute

Anda ingin mencegah pengguna yang belum terautentikasi mengakses halaman apa pun di bawah /admin. Di mana pemeriksaan utama untuk hal ini harus diterapkan?

Jawab di pelajaran interaktif

Rangkuman: Melindungi Aplikasi Anda

Anda telah mempelajari cara mengamankan aplikasi Next.js 15 menggunakan pendekatan berlapis:

Middleware: Menjaga seluruh rute dan mengarahkan pengguna yang tidak berwenang.
Komponen Server: Merender UI secara kondisional atau mengarahkan pengguna berdasarkan otorisasi mereka.
Aksi Server: Melindungi perubahan data dengan memverifikasi izin pengguna sebelum eksekusi.

Menggabungkan teknik-teknik ini memberikan perlindungan yang tangguh bagi rute dan data sensitif dalam aplikasi Anda.

Gratis untuk memulai

Belajar TypeScript dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 22
Pelajaran: 88

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Melindungi Rute & Data” gratis?

Ya — teks lengkap “Melindungi Rute & Data” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Next.js 15 Fullstack (App Router + Server Actions), upgrade ke CoddyKit PRO. Kursus Next.js 15 Fullstack (App Router + Server Actions) mencakup 6 pelajaran total.

Apa yang akan aku pelajari di “Melindungi Rute & Data”?

Implementasikan perantara dan pemeriksaan sisi server untuk melindungi rute serta data tertentu berdasarkan status autentikasi pengguna. Kamu berlatih Next.js 15 Fullstack (App Router + Server Actions) dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Next.js 15 Fullstack (App Router + Server Actions)?

Tidak diperlukan pengalaman sebelumnya. Next.js 15 Fullstack (App Router + Server Actions) di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 6.

Berapa lama pelajaran “Melindungi Rute & Data” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Next.js 15 Fullstack (App Router + Server Actions) ini?

Ya. Setiap pelajaran Next.js 15 Fullstack (App Router + Server Actions) menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Next.js 15 Fullstack (App Router + Server Actions)