M

MLOG

Bahasa Indonesia

Pelajari cara memanfaatkan Rute API Next.js untuk membangun backend nirserver langsung di dalam aplikasi Next.js Anda. Panduan ini mencakup semuanya, mulai dari penyiapan dasar hingga teknik lanjutan.

Rute API Next.js: Membangun Backend Anda dengan Mudah

Next.js telah merevolusi pengembangan front-end dengan fitur-fitur canggih dan strukturnya yang intuitif. Namun, tahukah Anda bahwa Next.js juga dapat menyederhanakan pengembangan backend secara signifikan? Rute API Next.js memungkinkan Anda membuat endpoint API nirserver langsung di dalam aplikasi Next.js Anda, menghilangkan kebutuhan akan server backend terpisah dalam banyak kasus. Panduan komprehensif ini akan memandu Anda melalui proses membangun backend yang kuat dan dapat diskalakan menggunakan Rute API Next.js.

Apa itu Rute API Next.js?

Rute API adalah fungsi nirserver yang Anda buat di dalam direktori /pages/api di proyek Next.js Anda. Fungsi-fungsi ini menangani permintaan HTTP yang masuk dan mengembalikan respons, sama seperti API backend tradisional. Perbedaan utamanya adalah bahwa mereka di-deploy sebagai fungsi nirserver, yang berarti Anda tidak perlu mengelola server atau infrastruktur.

Anggap saja sebagai fungsi backend yang ringan dan sesuai permintaan yang terintegrasi secara mulus dengan front-end Next.js Anda.

Manfaat Menggunakan Rute API Next.js

Memulai dengan Rute API Next.js

Mari kita buat rute API sederhana yang mengembalikan respons JSON. Pertama, pastikan Anda sudah menyiapkan proyek Next.js. Jika belum, buatlah dengan menggunakan:

npx create-next-app my-app
cd my-app

Sekarang, buat file bernama hello.js di dalam direktori /pages/api:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

Kode ini mendefinisikan rute API sederhana yang merespons dengan objek JSON yang berisi nama "John Doe". Untuk mengakses rute API ini, jalankan server pengembangan Next.js Anda:

npm run dev

Kemudian, buka browser Anda dan navigasikan ke http://localhost:3000/api/hello. Anda akan melihat respons JSON berikut:

{"name": "John Doe"}

Memahami Handler Rute API

Fungsi handler dalam rute API Anda menerima dua argumen:

Anda dapat menggunakan objek-objek ini untuk menangani berbagai jenis permintaan, membaca data dari body permintaan, mengatur header respons, dan mengirim berbagai jenis respons.

Menangani Metode HTTP yang Berbeda

Anda dapat menggunakan properti req.method untuk menentukan metode HTTP dari permintaan yang masuk dan menangani metode yang berbeda sesuai kebutuhan. Sebagai contoh:

// pages/api/method.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    // Tangani permintaan GET
    res.status(200).json({ message: 'Ini adalah permintaan GET' })
  } else if (req.method === 'POST') {
    // Tangani permintaan POST
    res.status(200).json({ message: 'Ini adalah permintaan POST' })
  } else {
    // Tangani metode lain
    res.status(405).json({ message: 'Metode Tidak Diizinkan' })
  }
}

Dalam contoh ini, rute API menangani permintaan GET dan POST. Jika metode permintaan adalah GET, ia merespons dengan objek JSON yang berisi pesan "Ini adalah permintaan GET". Jika metode permintaan adalah POST, ia merespons dengan objek JSON yang berisi pesan "Ini adalah permintaan POST". Jika metode permintaan adalah yang lain, ia merespons dengan error 405 Method Not Allowed.

Membaca Data dari Body Permintaan

Untuk permintaan POST, PUT, dan PATCH, Anda sering kali perlu membaca data dari body permintaan. Next.js menyediakan dukungan bawaan untuk mem-parsing body permintaan JSON dan URL-encoded. Untuk mem-parsing body permintaan JSON, Anda dapat menggunakan properti req.body. Sebagai contoh:

// pages/api/post.js
export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email } = req.body

    // Proses data
    console.log('Nama:', name)
    console.log('Email:', email)

    res.status(200).json({ message: 'Data berhasil diterima' })
  } else {
    res.status(405).json({ message: 'Metode Tidak Diizinkan' })
  }
}

Untuk menguji rute API ini, Anda dapat menggunakan alat seperti Postman atau curl untuk mengirim permintaan POST dengan body JSON:

curl -X POST -H "Content-Type: application/json" -d '{"name": "Jane Doe", "email": "jane.doe@example.com"}' http://localhost:3000/api/post

Mengatur Header Respons

Anda dapat menggunakan metode res.setHeader() untuk mengatur header respons. Ini berguna untuk mengatur tipe konten, kontrol cache, dan informasi penting lainnya. Sebagai contoh:

// pages/api/headers.js
export default function handler(req, res) {
  res.setHeader('Content-Type', 'application/json')
  res.setHeader('Cache-Control', 's-maxage=3600')
  res.status(200).json({ message: 'Halo, dunia!' })
}

Dalam contoh ini, rute API mengatur header Content-Type ke application/json, yang menunjukkan bahwa responsnya adalah objek JSON. Ini juga mengatur header Cache-Control ke s-maxage=3600, yang memberitahu browser dan CDN untuk menyimpan respons dalam cache hingga 1 jam.

Penanganan Error

Penting untuk menangani error dengan baik di rute API Anda. Anda dapat menggunakan blok try-catch untuk menangkap pengecualian dan mengirim respons error yang sesuai ke klien. Sebagai contoh:

// pages/api/error.js
export default async function handler(req, res) {
  try {
    // Simulasikan sebuah error
    throw new Error('Terjadi kesalahan')
  } catch (error) {
    console.error(error)
    res.status(500).json({ message: 'Internal Server Error' })
  }
}

Dalam contoh ini, rute API mensimulasikan error dengan melemparkan objek Error baru. Blok catch menangkap error tersebut, mencatatnya ke konsol, dan mengirim respons 500 Internal Server Error ke klien. Pertimbangkan untuk menggunakan sistem logging yang kuat seperti Sentry atau Datadog untuk lingkungan produksi.

Menghubungkan ke Basis Data

Salah satu kasus penggunaan paling umum untuk rute API adalah menghubungkan ke basis data. Rute API Next.js terintegrasi secara mulus dengan berbagai basis data, termasuk:

Berikut adalah contoh cara menghubungkan ke basis data MongoDB di rute API Next.js:

// pages/api/mongodb.js
import { MongoClient } from 'mongodb'

const uri = process.env.MONGODB_URI
const options = {}

let client
let clientPromise

if (!process.env.MONGODB_URI) {
  throw new Error('Harap tambahkan URI Mongo Anda ke .env.local')
}

if (process.env.NODE_ENV === 'development') {
  // Dalam mode pengembangan, gunakan variabel global agar nilainya
  // dipertahankan di seluruh muatan ulang modul yang disebabkan oleh HMR (Hot Module Replacement).
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options)
    global._mongoClientPromise = client.connect()
  }
  clientPromise = global._mongoClientPromise
} else {
  // Dalam mode produksi, lebih baik tidak menggunakan variabel global.
  client = new MongoClient(uri, options)
  clientPromise = client.connect()
}

// Ekspor promise MongoClient dengan lingkup modul. Dengan melakukan ini di
// modul terpisah, klien dapat digunakan kembali dengan aman di beberapa
// fungsi. Lihat: https://github.com/vercel/next.js/blob/canary/examples/with-mongodb/lib/mongodb.js
export default async function handler(req, res) {
  try {
    const client = await clientPromise
    const db = client.db(process.env.MONGODB_DB)
    const collection = db.collection('users')

    const users = await collection.find({}).toArray()

    res.status(200).json({ users })
  } catch (e) {
    console.error(e)
    res.status(500).json({ message: 'Gagal mengambil pengguna' })
  }
}

Sebelum menjalankan kode ini, pastikan Anda telah menginstal paket mongodb:

npm install mongodb

Anda juga perlu mengatur variabel lingkungan MONGODB_URI dan MONGODB_DB. Variabel-variabel ini harus didefinisikan dalam file .env.local Anda (atau pengaturan variabel lingkungan penyedia hosting Anda untuk produksi). MONGODB_URI berisi string koneksi ke basis data MongoDB Anda, dan MONGODB_DB menentukan nama basis data.

Autentikasi dan Otorisasi

Melindungi rute API Anda sangat penting untuk keamanan. Rute API Next.js dapat diamankan menggunakan berbagai teknik autentikasi dan otorisasi, termasuk:

Berikut adalah contoh cara melindungi rute API menggunakan autentikasi JWT:

// pages/api/protected.js
import jwt from 'jsonwebtoken'

const secret = process.env.JWT_SECRET

export default function handler(req, res) {
  const token = req.headers.authorization?.split(' ')[1]

  if (!token) {
    return res.status(401).json({ message: 'Tidak diotorisasi' })
  }

  try {
    const decoded = jwt.verify(token, secret)
    // Objek "decoded" berisi informasi pengguna yang disematkan dalam token
    // Contohnya: const userId = decoded.userId;

    // Lanjutkan memproses permintaan
    res.status(200).json({ message: 'Sumber daya yang dilindungi berhasil diakses' })
  } catch (error) {
    return res.status(401).json({ message: 'Token tidak valid' })
  }
}

Sebelum menjalankan kode ini, pastikan Anda telah menginstal paket jsonwebtoken:

npm install jsonwebtoken

Anda juga perlu mengatur variabel lingkungan JWT_SECRET. Ini harus berupa kunci rahasia yang kuat dan dibuat secara acak yang digunakan untuk menandatangani dan memverifikasi JWT. Simpan ini dengan aman dan jangan pernah mengeksposnya di kode sisi klien Anda.

Middleware

Meskipun Next.js tidak menawarkan middleware tradisional untuk rute API seperti halnya Express.js, Anda dapat mencapai fungsionalitas serupa dengan membungkus handler rute API Anda dengan fungsi yang dapat digunakan kembali. Ini memungkinkan Anda untuk melakukan tugas-tugas seperti:

Berikut adalah contoh cara membuat middleware logging sederhana:

// utils/middleware.js
export function withLogging(handler) {
  return async function(req, res) {
    console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`)
    return handler(req, res)
  }
}

Untuk menggunakan middleware ini, cukup bungkus handler rute API Anda dengan fungsi withLogging:

// pages/api/logged.js
import { withLogging } from '../../utils/middleware'

async function handler(req, res) {
  res.status(200).json({ message: 'Permintaan ini telah dicatat' })
}

export default withLogging(handler)

Praktik Terbaik untuk Membangun Rute API Next.js

Teknik Lanjutan

Pekerjaan Latar Belakang (Background Jobs)

Untuk tugas yang berjalan lama yang tidak boleh memblokir respons API, pertimbangkan untuk menggunakan pekerjaan latar belakang. Anda dapat menggunakan pustaka seperti BullMQ atau Bree untuk mengelola pekerjaan latar belakang Anda dan memprosesnya secara asinkron.

WebSockets

Untuk aplikasi real-time, Anda dapat menggunakan WebSockets di rute API Next.js Anda. Pustaka seperti Socket.IO dan ws memudahkan untuk membangun koneksi persisten antara klien dan server.

GraphQL

Jika Anda membutuhkan cara yang lebih fleksibel dan efisien untuk mengambil data, pertimbangkan untuk menggunakan GraphQL. Anda dapat menggunakan pustaka seperti Apollo Server atau Yoga untuk membuat endpoint API GraphQL di aplikasi Next.js Anda.

Kesimpulan

Rute API Next.js menyediakan cara yang kuat dan nyaman untuk membangun backend nirserver langsung di dalam aplikasi Next.js Anda. Dengan memanfaatkan manfaat arsitektur nirserver, Anda dapat menyederhanakan pengembangan, meningkatkan performa, dan mengurangi biaya. Baik Anda membangun formulir kontak sederhana atau platform e-commerce yang kompleks, Rute API Next.js dapat membantu Anda membuat backend yang kuat dan dapat diskalakan dengan mudah. Dengan pemahaman yang kuat tentang dasar-dasar dan penerapan praktik terbaik, Anda dapat memanfaatkan alat canggih ini untuk membuat aplikasi yang efisien, aman, dan dapat diakses secara global.