Belajar Next.js App Router #10: Route Handlers (API)

• Apa Itu Route Handlers?
• Struktur Dasar Route Handlers
• Membuat Endpoint GET
• Menangani Method POST
• Perbedaan Route Handlers dan Server Component
• Kapan Menggunakan Route Handlers?
• Kesimpulan

Halo teman-teman semuanya. Pada artikel sebelumnya, kita telah membahas metadata dan SEO pada Next.js App Router. Pada artikel ini, kita akan mempelajari cara membuat API di App Router menggunakan Route Handlers.

Route Handlers merupakan pengganti API Routes pada pendekatan lama (pages/api). Dengan Route Handlers, kita dapat membangun endpoint API yang lebih terstruktur dan terintegrasi langsung dengan App Router.

Apa Itu Route Handlers?

Route Handlers adalah mekanisme untuk menangani HTTP request seperti GET, POST, PUT, dan DELETE di dalam App Router. Route Handlers ditulis di dalam file bernama route.ts dan ditempatkan di dalam folder app/api.

Dengan pendekatan ini, API menjadi bagian dari struktur routing aplikasi, sehingga lebih konsisten dan mudah dikelola.

Struktur Dasar Route Handlers

Sebagai contoh, kita akan membuat endpoint API sederhana untuk mengambil data.

Silahkan teman-teman buat struktur folder berikut:

app/api/posts/route.ts

File route.ts inilah yang akan menangani request ke endpoint /api/posts.

Membuat Endpoint GET

Sekarang kita isi file route.ts dengan handler untuk method GET.

import { NextResponse } from 'next/server'

export async function GET() {
    const posts = [
        { id: 1, title: 'Post Pertama' },
        { id: 2, title: 'Post Kedua' },
    ]

    return NextResponse.json(posts)
}

Jika kita membuka browser atau menggunakan tools seperti Postman dan mengakses: http://localhost:3000/api/posts.

Maka data JSON akan dikembalikan oleh API tersebut.

Menangani Method POST

Selain GET, kita juga bisa menangani method POST di Route Handlers.

Contoh sederhana:

import { NextResponse } from 'next/server'

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

    return NextResponse.json({
        message: 'Data berhasil diterima',
        data: body,
    })
}

Dengan handler ini, kita bisa menerima data dari client melalui request body.

Perbedaan Route Handlers dan Server Component

Meskipun sama-sama berjalan di server, Route Handlers dan Server Component memiliki tujuan yang berbeda.

Server Component digunakan untuk merender halaman dan mengambil data internal aplikasi, sedangkan Route Handlers digunakan untuk membangun endpoint API yang bisa diakses oleh client lain atau pihak eksternal.

Pemilihan antara Server Component dan Route Handlers bergantung pada kebutuhan aplikasi.

Kapan Menggunakan Route Handlers?

Route Handlers sangat cocok digunakan ketika kita membutuhkan API yang akan dikonsumsi oleh aplikasi lain, seperti mobile app, frontend terpisah, atau integrasi dengan layanan pihak ketiga. Route Handlers juga diperlukan ketika kita membutuhkan kontrol penuh terhadap request dan response HTTP.

Kesimpulan

Pada artikel ini, kita telah mempelajari konsep Route Handlers (API) pada Next.js App Router, mulai dari struktur dasar, penanganan method GET dan POST, hingga kapan sebaiknya menggunakan Route Handlers. Pendekatan ini memberikan cara yang lebih modern dan terintegrasi untuk membangun API di Next.js.

Pada artikel selanjutnya, kita akan membahas Server Actions, yaitu cara modern menangani submit form dan proses data tanpa harus membuat API tambahan.

Terima Kasih