0Pricing
Frontend Academy · Pelajaran

Rute API dan Middleware Next.js

Buat endpoint API tanpa server di direktori api/, proses permintaan dalam Route Handlers, dan jalankan Middleware edge untuk autentikasi serta pengalihan.

Rute API dan Middleware Next.js adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Mengapa Rute API?

Next.js menyertakan server bersama aplikasi Anda—Anda dapat menulis titik akhir backend di samping halaman tanpa proyek Node terpisah. Ini sangat cocok untuk meneruskan permintaan, pengiriman formulir, webhook, dan API kecil.

Rute API Router Halaman

Berkas di pages/api/ mengekspor fungsi default dengan parameter bergaya Express (req, res).

// pages/api/users.ts
import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'GET') {
    const users = await db.users.findMany();
    return res.json(users);
  }
  if (req.method === 'POST') {
    const user = await db.users.create({ data: req.body });
    return res.status(201).json(user);
  }
  return res.status(405).end();
}

Penangan Rute Router Aplikasi

Router Aplikasi menggunakan API Request/Response standar Web. Setiap metode HTTP merupakan ekspor bernama.

// app/api/users/route.ts
import { NextResponse } from 'next/server';

export async function GET() {
  const users = await db.users.findMany();
  return NextResponse.json(users);
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await db.users.create({ data: body });
  return NextResponse.json(user, { status: 201 });
}

Rute API Dinamis

Segmen dinamis bekerja dengan cara yang sama: app/api/users/[id]/route.ts cocok dengan /api/users/123.

// app/api/users/[id]/route.ts
export async function GET(req: Request, { params }: { params: { id: string }}) {
  const user = await db.users.findUnique({ where: { id: params.id }});
  if (!user) return new Response('Not Found', { status: 404 });
  return Response.json(user);
}

Membaca Cookie dan Header

Dalam Router Aplikasi, gunakan fungsi pembantu dari next/headers yang cakupannya terbatas pada permintaan.

import { cookies, headers } from 'next/headers';

export async function GET() {
  const token = cookies().get('token')?.value;
  const userAgent = headers().get('user-agent');
  // ...
}

Respons Streaming

Penangan rute dapat mengembalikan respons streaming—berguna untuk penyelesaian obrolan AI atau pembuatan berkas berukuran besar.

export async function GET() {
  const encoder = new TextEncoder();
  const stream = new ReadableStream({
    async start(controller) {
      for (let i = 0; i < 5; i++) {
        controller.enqueue(encoder.encode(`chunk ${i}\n`));
        await new Promise(r => setTimeout(r, 500));
      }
      controller.close();
    }
  });
  return new Response(stream);
}

Middleware — Berjalan Sebelum Rute

middleware.ts di akar proyek berjalan sebelum permintaan mencapai halaman atau rute API. Gunakan untuk pemeriksaan autentikasi, pengalihan, penulisan ulang header, dan pengujian A/B.

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

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

Pencocok Middleware

Batasi jalur tempat middleware berjalan dengan konfigurasi pencocok.

export const config = {
  matcher: [
    '/dashboard/:path*',
    '/api/:path*',
    '/((?!_next/static|_next/image|favicon.ico).*)'
  ]
};

Lingkungan Runtime Middleware

Middleware secara bawaan berjalan di Edge Runtime—isolat V8 ringan, bukan Node lengkap. API yang tersedia terbatas: tidak ada modul Node seperti fs dan tidak ada dependensi native.

Pola Autentikasi dengan Middleware

Pola umum: verifikasi JWT dalam middleware, arahkan ke halaman login jika token tidak ada atau tidak valid, lalu sematkan pengguna decoded ke header permintaan yang dapat dibaca oleh rute di bawahnya.

import jwt from 'jsonwebtoken';

export function middleware(req: NextRequest) {
  const token = req.cookies.get('token')?.value;
  if (!token) return NextResponse.redirect(new URL('/login', req.url));
  try {
    const decoded = jwt.verify(token, process.env.SECRET!);
    const res = NextResponse.next();
    res.headers.set('x-user-id', String(decoded.sub));
    return res;
  } catch {
    return NextResponse.redirect(new URL('/login', req.url));
  }
}

Pembatasan Laju dalam Middleware

Gabungkan middleware dengan penyimpanan KV (Upstash, Vercel KV) untuk menerapkan batas laju per-IP sebelum logika API Anda dijalankan.

Kapan TIDAK Menggunakan Rute API

Untuk layanan mikro terpisah atau API bersama, gunakan backend sungguhan (Hono, Express, NestJS). Rute API Next.js sangat cocok untuk meneruskan permintaan, webhook, dan titik akhir khusus aplikasi—bukan untuk menyediakan API publik bagi klien lain.

Cek Cepat

Di mana middleware Next.js berjalan, dan apa kasus penggunaan yang paling umum?

Ringkasan: Rute API & Middleware

Router Halaman: pages/api dengan req/res. Router Aplikasi: app/api/.../route.ts dengan ekspor metode (GET/POST/dan sebagainya) menggunakan Request/Response. Baca cookie/header melalui next/headers. Respons streaming dengan ReadableStream. middleware.ts berjalan di Edge sebelum rute—autentikasi, pengalihan, dan header. Konfigurasi pencocok membatasi jalur. Gunakan backend sungguhan untuk API publik.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Rute API dan Middleware Next.js” gratis?

Ya — teks lengkap “Rute API dan Middleware Next.js” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Rute API dan Middleware Next.js”?

Buat endpoint API tanpa server di direktori api/, proses permintaan dalam Route Handlers, dan jalankan Middleware edge untuk autentikasi serta pengalihan. Kamu berlatih Frontend Academy 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 Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy 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 4 dari 4.

Berapa lama pelajaran “Rute API dan Middleware Next.js” 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 Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy 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

  1. Router Pages vs Router App
  2. Komponen Server dan Komponen Klien
  3. SSG SSR dan ISR
  4. Rute API dan Middleware Next.js
← Kembali ke Frontend Academy