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

• Pengembangan yang Disederhanakan: Tulis kode front-end dan backend Anda dalam proyek yang sama, menggunakan JavaScript atau TypeScript. Tidak ada lagi pergantian konteks antara proyek dan teknologi yang berbeda.
• Arsitektur Nirserver: Manfaatkan skalabilitas, keandalan, dan efektivitas biaya dari komputasi nirserver. Hanya bayar untuk sumber daya yang Anda konsumsi.
• Deployment yang Mudah: Deploy seluruh aplikasi Anda (front-end dan backend) dengan satu perintah menggunakan platform seperti Vercel atau Netlify.
• Keamanan Bawaan: Next.js dan platform nirserver menyediakan fitur keamanan bawaan untuk melindungi endpoint API Anda.
• Peningkatan Performa: Rute API dapat di-deploy lebih dekat dengan pengguna Anda, mengurangi latensi dan meningkatkan performa, terutama bermanfaat bagi pengguna secara global.
• Penggunaan Ulang Kode: Bagikan kode antara front-end dan backend Anda, mengurangi duplikasi kode dan meningkatkan kemudahan pemeliharaan.

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
            

              
                Copy
              
            
          

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' })
}

            

              
                Copy
              
            
          

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
            

              
                Copy
              
            
          

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

            {"name": "John Doe"}
            

              
                Copy
              
            
          

Memahami Handler Rute API

Fungsi handler dalam rute API Anda menerima dua argumen:

• req: Sebuah instance dari http.IncomingMessage, yang berisi informasi tentang permintaan yang masuk, seperti metode permintaan, header, dan body.
• res: Sebuah instance dari http.ServerResponse, yang memungkinkan Anda mengirim respons kembali ke klien.

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' })
  }
}

            

              
                Copy
              
            
          

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' })
  }
}

            

              
                Copy
              
            
          

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
            

              
                Copy
              
            
          

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!' })
}

            

              
                Copy
              
            
          

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' })
  }
}

            

              
                Copy
              
            
          

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:

• MongoDB: Basis data NoSQL populer yang sangat cocok untuk data yang fleksibel dan tidak terstruktur.
• PostgreSQL: Basis data relasional open-source yang kuat dan dikenal karena keandalan dan integritas datanya.
• MySQL: Basis data relasional open-source populer lainnya yang banyak digunakan untuk aplikasi web.
• Firebase: Platform berbasis cloud yang menyediakan basis data real-time dan layanan lainnya.
• FaunaDB: Basis data nirserver yang dirancang untuk aplikasi global.

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' })
  }
}

            

              
                Copy
              
            
          

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

            npm install mongodb
            

              
                Copy
              
            
          

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:

• JSON Web Tokens (JWT): Standar untuk mentransmisikan informasi secara aman antar pihak sebagai objek JSON.
• Kunci API: Cara sederhana untuk membatasi akses ke endpoint API Anda.
• OAuth: Protokol delegasi yang memungkinkan pengguna memberikan akses aplikasi pihak ketiga ke sumber daya mereka tanpa membagikan kredensial mereka.
• NextAuth.js: Solusi autentikasi open-source lengkap untuk aplikasi Next.js.

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' })
  }
}

            

              
                Copy
              
            
          

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

            npm install jsonwebtoken
            

              
                Copy
              
            
          

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:

• Autentikasi: Verifikasi kredensial pengguna sebelum mengizinkan akses ke endpoint API.
• Otorisasi: Periksa apakah pengguna memiliki izin yang diperlukan untuk melakukan tindakan tertentu.
• Logging: Catat permintaan masuk dan respons keluar untuk tujuan audit dan debugging.
• Validasi: Validasi data permintaan untuk memastikan data tersebut memenuhi kriteria tertentu.
• Pembatasan Laju (Rate Limiting): Lindungi API Anda dari penyalahgunaan dengan membatasi jumlah permintaan yang dapat dibuat oleh pengguna dalam periode waktu tertentu.

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)
  }
}

            

              
                Copy
              
            
          

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)

            

              
                Copy
              
            
          

Praktik Terbaik untuk Membangun Rute API Next.js

• Jaga agar rute API Anda tetap kecil dan terfokus. Setiap rute API harus menangani tugas atau sumber daya tertentu.
• Gunakan variabel lingkungan untuk data sensitif. Jangan pernah melakukan hardcode rahasia atau kunci API dalam kode Anda.
• Validasi data permintaan untuk mencegah kerentanan keamanan. Gunakan pustaka seperti Joi atau Yup untuk memvalidasi body permintaan.
• Tangani error dengan baik dan berikan pesan error yang informatif. Gunakan blok try-catch dan catat error ke lokasi terpusat.
• Gunakan caching untuk meningkatkan performa. Cache data yang sering diakses untuk mengurangi beban basis data.
• Pantau rute API Anda untuk performa dan error. Gunakan alat pemantauan seperti Sentry atau Datadog untuk melacak kesehatan API Anda.
• Dokumentasikan rute API Anda menggunakan alat seperti Swagger atau OpenAPI. Ini memudahkan pengembang lain untuk menggunakan API Anda.
• Pertimbangkan untuk menggunakan TypeScript untuk keamanan tipe. TypeScript dapat membantu Anda menangkap error lebih awal dan meningkatkan kemudahan pemeliharaan kode Anda.
• Pikirkan tentang internasionalisasi (i18n) sejak awal. Jika aplikasi Anda akan digunakan oleh pengguna dari berbagai negara, rancang rute API Anda untuk mendukung berbagai bahasa dan mata uang. Misalnya, endpoint API untuk e-commerce mungkin perlu menangani tarif pajak dan biaya pengiriman yang berbeda berdasarkan lokasi pengguna.
• Terapkan konfigurasi CORS (Cross-Origin Resource Sharing) yang tepat. Ini sangat penting ketika API Anda diakses dari domain yang berbeda dari aplikasi Next.js Anda. Konfigurasikan CORS dengan hati-hati untuk hanya mengizinkan origin yang berwenang untuk mengakses sumber daya API Anda.

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.