0Pricing
Next.js 15 Fullstack Web Apps · Pelajaran

Membangun Penangan Rute API

Buat endpoint API RESTful yang tangguh menggunakan Penangan Rute App Router untuk logika backend.

Membangun Penangan Rute API adalah pelajaran Next.js 15 Fullstack Web Apps gratis di CoddyKit. Ini adalah pelajaran 1 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 Next.js 15 Fullstack Web Apps, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Next.js 15 Fullstack Web Apps mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

Welcome to Route Handlers

In Next.js 15, Route Handlers are the powerful way to build backend API endpoints directly within your App Router project.

They allow you to create RESTful APIs, handle webhooks, or perform any server-side logic, all co-located with your frontend code.

Why Use Route Handlers?

Route Handlers offer several benefits:

  • Simplicity: No need for a separate backend server.
  • Co-location: API logic lives next to related UI components.
  • Performance: Built on Web Standard APIs, making them efficient.
  • Flexibility: Support all HTTP methods (GET, POST, PUT, DELETE, etc.).

Creating Your First Handler

To create a Route Handler, define a route.ts (or .js) file inside an app directory segment. For example, app/api/hello/route.ts will handle requests to /api/hello.

Inside this file, you export functions that match HTTP methods, like GET, POST, etc.

Handling GET Requests

The GET function handles HTTP GET requests. It receives a NextRequest object and should return a NextResponse.

Let's create a simple 'hello world' API endpoint.

import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ message: 'Hello from API!' });
}

How to Access GET Handler

The previous code snippet, placed in app/api/hello/route.ts, creates an endpoint accessible at /api/hello.

When you navigate to http://localhost:3000/api/hello in your browser, you'll see the JSON response: {"message":"Hello from API!"}.

Handling POST Requests

For data submission, you'll use the POST function. It also receives the NextRequest object, which contains the request body.

You can parse the JSON body using await request.json().

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

export async function POST(request: NextRequest) {
  const data = await request.json();
  return NextResponse.json(
    { message: 'Data received', data },
    { status: 200 }
  );
}

Accessing Request Details

The NextRequest object provides rich access to request details:

  • request.url: The full request URL.
  • request.headers: Request headers (e.g., request.headers.get('Content-Type')).
  • request.nextUrl.searchParams: Query parameters (e.g., ?name=Alice).

These are crucial for dynamic and secure API logic.

Dynamic Segments in Handlers

Just like pages, Route Handlers can have dynamic segments. For example, app/api/items/[id]/route.ts.

You can access these dynamic parameters from the params object passed to your handler function.

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

interface Params {
  params: { id: string };
}

export async function GET(
  request: NextRequest,
  { params }: Params
) {
  const id = params.id; // '123' for /api/items/123
  return NextResponse.json({ itemId: id, message: 'Fetched item' });
}

Setting Status and Headers

When returning a NextResponse, you can customize the HTTP status code and headers.

This is important for proper API communication, like indicating success (200, 201) or errors (400, 404, 500).

import { NextResponse } from 'next/server';

export async function DELETE() {
  return new NextResponse(null, { status: 204 }); // No Content
}

Quick Check: Handler Basics

You want to create an API endpoint at /api/products that returns a list of products when a GET request is made.

Which code snippet correctly sets up this handler in app/api/products/route.ts?

Recap: Building API Handlers

You've learned the fundamentals of Next.js 15 Route Handlers!

  • They allow backend logic co-located in the app directory.
  • Define handlers by exporting functions (GET, POST, etc.) in a route.ts file.
  • Use NextRequest to access request details and NextResponse to send responses.
  • Dynamic segments enable flexible API routes.

This powerful feature streamlines fullstack development in Next.js.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membangun Penangan Rute API” gratis?

Ya — teks lengkap “Membangun Penangan Rute API” 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 Web Apps, upgrade ke CoddyKit PRO. Kursus Next.js 15 Fullstack Web Apps mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Membangun Penangan Rute API”?

Buat endpoint API RESTful yang tangguh menggunakan Penangan Rute App Router untuk logika backend. Kamu berlatih Next.js 15 Fullstack Web Apps 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 Web Apps?

Tidak diperlukan pengalaman sebelumnya. Next.js 15 Fullstack Web Apps 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 1 dari 4.

Berapa lama pelajaran “Membangun Penangan Rute API” 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 Web Apps ini?

Ya. Setiap pelajaran Next.js 15 Fullstack Web Apps 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. Membangun Penangan Rute API
  2. Validasi Permintaan dan Keamanan
  3. Mengintegrasikan Layanan Eksternal
  4. Pembatasan Laju dan Penanganan Error API
← Kembali ke Next.js 15 Fullstack Web Apps