API Routes di Next.js

Saat membangun aplikasi web modern, hampir semua aplikasi membutuhkan API untuk mengirim dan mengambil data. Biasanya developer membuat backend terpisah menggunakan framework seperti Express, Laravel, atau NestJS.

Namun salah satu kelebihan dari Next.js adalah kita bisa membuat endpoint API langsung di dalam project yang sama.

Dengan fitur API Routes, Next.js memungkinkan kita membuat backend sederhana tanpa perlu membuat server terpisah.

Contoh endpoint yang bisa dibuat:

/api/users
/api/posts
/api/auth/login

Semua endpoint tersebut bisa langsung dibuat di dalam project Next.js.

Pendekatan ini sangat cocok untuk:

• aplikasi kecil hingga menengah

• dashboard internal

• prototyping

• backend sederhana untuk frontend

Cara Kerja API Routes

API Routes berjalan di server side, bukan di browser. Artinya kode di dalam API Route bisa melakukan berbagai hal seperti:

• mengambil data dari database

• memproses request dari client

• memanggil API eksternal

• melakukan validasi data

• mengelola autentikasi

Dengan kata lain, Next.js tidak hanya berfungsi sebagai framework frontend, tetapi juga bisa menjadi backend ringan.

Struktur Folder API Routes

Jika menggunakan App Router (Next.js 13 ke atas), API biasanya dibuat di dalam folder:

app/api

Contoh struktur folder sederhana:

app
 ├ api
 │   ├ users
 │   │   └ route.ts
 │   ├ posts
 │   │   └ route.ts
 │   └ auth
 │       └ route.ts

Setiap file route.ts akan menjadi endpoint API.

Contohnya:

/api/users
/api/posts
/api/auth

Next.js secara otomatis membuat endpoint tersebut berdasarkan struktur folder.

Contoh API Route Sederhana

Sekarang kita coba membuat API sederhana.

Buat folder berikut:

app/api/hello/route.ts

Lalu isi file tersebut dengan kode berikut.

import { NextResponse } from "next/server"

export async function GET() {
  return NextResponse.json({
    message: "Hello from Next.js API"
  })
}

Sekarang jalankan server development:

npm run dev

Kemudian buka endpoint berikut di browser:

http://localhost:3000/api/hello

Response yang akan muncul:

{
  "message": "Hello from Next.js API"
}

Dengan beberapa baris kode saja kita sudah berhasil membuat API.

Menggunakan Method HTTP

Dalam API Routes kita bisa menggunakan berbagai method HTTP seperti:

• GET

• POST

• PUT

• DELETE

Contoh implementasi:

import { NextResponse } from "next/server"

export async function GET() {
  return NextResponse.json({ message: "GET request" })
}

export async function POST() {
  return NextResponse.json({ message: "POST request" })
}

export async function DELETE() {
  return NextResponse.json({ message: "DELETE request" })
}

Next.js akan otomatis menjalankan fungsi yang sesuai dengan method request yang dikirim oleh client.

Mengambil Data dari Request Body

Seringkali API menerima data dari frontend, misalnya untuk membuat data baru atau melakukan login.

Contoh endpoint login sederhana:

import { NextResponse } from "next/server"

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

  const { email, password } = body

  return NextResponse.json({
    message: "Login request received",
    email
  })
}

Contoh request dari frontend:

fetch("/api/login", {
  method: "POST",
  body: JSON.stringify({
    email: "user@email.com",
    password: "123456"
  })
})

Data yang dikirim dari frontend akan diproses oleh API Route di server.

Dynamic API Routes

Kadang kita membutuhkan endpoint seperti berikut:

/api/posts/1
/api/posts/2
/api/posts/10

Untuk kasus seperti ini kita bisa menggunakan dynamic route.

Struktur foldernya:

app/api/posts/[id]/route.ts

Contoh implementasi:

import { NextResponse } from "next/server"

export async function GET(
  request: Request,
  { params }: { params: { id: string } }
) {
  const postId = params.id

  return NextResponse.json({
    id: postId,
    title: "Example Post"
  })
}

Sekarang endpoint berikut akan otomatis bekerja:

/api/posts/1
/api/posts/2
/api/posts/3

Next.js akan membaca nilai id dari URL.

Kapan Sebaiknya Menggunakan API Routes?

API Routes sangat cocok digunakan untuk:

• aplikasi kecil hingga menengah

• dashboard internal

• backend sederhana

• integrasi database

• sistem autentikasi dasar

Namun untuk aplikasi yang sangat kompleks atau menggunakan arsitektur microservices, biasanya backend akan dipisahkan menggunakan framework lain.

Kesimpulan

API Routes adalah salah satu fitur yang membuat Next.js sangat fleksibel. Dengan fitur ini kita bisa membangun frontend dan backend dalam satu project.

Beberapa keuntungan menggunakan API Routes:

• tidak perlu membuat backend terpisah

• setup lebih cepat

• integrasi langsung dengan Next.js

• cocok untuk aplikasi modern

Untuk banyak project, pendekatan ini sudah cukup untuk membangun aplikasi yang scalable tanpa arsitektur yang terlalu kompleks.

Pada Part 7 nanti kita akan membahas topik yang sangat penting dalam aplikasi modern, yaitu Authentication di Next.js. Kita akan belajar bagaimana membuat sistem login dan melindungi halaman dari user yang belum terautentikasi.