Panduan Utama Membangun API Next.js: Petualangan Penuh Contoh

Hai, sesama pengembang! Apakah Anda siap untuk menyelami dunia Next.js dan mempelajari cara membuat API yang hebat? Dalam postingan blog ini, kita akan menjelajahi contoh API Next.js, membahas pentingnya API, dan memperkenalkan Anda pada alat fantastis bernama Apidog yang akan membuat pengembangan API Anda lebih lancar dari sebelumnya. Jadi, ambil minuman favorit Anda, dan mari kita mulai!

💡

Ngomong-ngomong, jika Anda mencari alat yang mudah digunakan untuk menguji dan mendokumentasikan API Anda, lihat Apidog. Ini adalah pengubah permainan untuk pengembangan API, dan Anda dapat mengunduh Apidog secara gratis untuk menyederhanakan alur kerja Anda!

button

Apa itu Next.js?

Sebelum kita menyelami seluk-beluk pengembangan API, mari kita luangkan waktu sejenak untuk memahami apa itu Next.js. Next.js adalah kerangka kerja React populer yang memungkinkan pengembang untuk membangun aplikasi React yang dirender server dengan mudah. Ia menawarkan fitur-fitur seperti pembuatan situs statis, rendering sisi server, dan sistem rute API yang hebat. Ini menjadikannya pilihan yang sangat baik untuk membangun aplikasi web modern..

Mengapa Menggunakan Next.js untuk API?

Anda mungkin bertanya-tanya, mengapa saya harus menggunakan Next.js untuk API ketika ada begitu banyak opsi lain di luar sana? Pertanyaan bagus! Berikut adalah beberapa alasan yang menarik:

Kesederhanaan: Next.js menyediakan cara yang mudah dan intuitif untuk membuat rute API. Anda tidak perlu menyiapkan server terpisah atau mengonfigurasi middleware yang kompleks. Semuanya sudah terpasang!

Performa: Dengan Next.js, Anda dapat memanfaatkan rendering sisi server dan pembuatan situs statis untuk mengoptimalkan performa API Anda. Ini berarti waktu respons yang lebih cepat dan pengalaman pengguna yang lebih baik.

Fleksibilitas: Next.js memungkinkan Anda untuk menggunakan berbagai teknologi backend, termasuk Node.js, Express, dan banyak lagi. Anda dapat memilih alat yang paling sesuai dengan kebutuhan Anda.

Ramah SEO: Next.js dirancang dengan mempertimbangkan SEO, sehingga memudahkan API Anda untuk ditemukan oleh mesin pencari.

Menyiapkan Proyek Next.js Anda

Mari kita mulai dengan proyek Next.js sederhana. Jika Anda belum melakukannya, Anda perlu menginstal Node.js dan npm (atau yarn) di mesin Anda. Setelah selesai, Anda dapat membuat proyek Next.js baru dengan menjalankan perintah berikut:

npx create-next-app my-nextjs-api

Arahkan ke direktori proyek Anda:

cd my-nextjs-api

Sekarang, mari kita selami pembuatan rute API pertama kita!

Membuat Rute API Next.js Pertama Anda

Di Next.js, rute API disimpan di direktori pages/api. Mari kita buat rute API sederhana yang mengembalikan daftar pengguna. Buat file baru bernama users.js di direktori pages/api:

mkdir -p pages/api
touch pages/api/users.js

Buka users.js dan tambahkan kode berikut:

// pages/api/users.js

export default function handler(req, res) {
  const users = [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' },
  ];

  res.status(200).json(users);
}

Kode ini mendefinisikan rute API dasar yang merespons dengan daftar pengguna. Fungsi handler mengambil dua argumen: req (objek permintaan) dan res (objek respons). Kita menggunakan res.status(200).json(users) untuk mengirim respons JSON dengan kode status 200 (OK).

Menguji API Anda

Untuk menguji API baru Anda, mulai server pengembangan Next.js Anda:

npm run dev

Buka browser Anda dan navigasikan ke http://localhost:3000/api/users. Anda akan melihat respons JSON dengan daftar pengguna:

[
  { "id": 1, "name": "John Doe" },
  { "id": 2, "name": "Jane Doe" }
]

Memperkenalkan Apidog: Pendamping Pengembangan API Anda

Mengembangkan dan menguji API bisa menjadi tugas yang menakutkan, tetapi dengan alat yang tepat, itu menjadi mudah. Di situlah Apidog masuk. Apidog adalah alat pengembangan API all-in-one yang memungkinkan Anda untuk mendesain, menguji, dan mendokumentasikan API Anda dengan mudah. Ia menawarkan antarmuka yang ramah pengguna dan fitur-fitur hebat untuk menyederhanakan alur kerja Anda.

button

Berikut adalah cara Anda dapat menggunakan Apidog untuk meningkatkan alur kerja Anda. Apidog memungkinkan Anda untuk menguji API Anda langsung di dalam alat. Anda dapat membuat permintaan GET, POST, PUT, dan DELETE, dan melihat respons secara real-time.

Langkah 1: Buka Apidog dan buat permintaan baru.

Langkah 2: Temukan atau masukkan secara manual detail API untuk permintaan POST yang ingin Anda buat.

Langkah 3: Isi parameter yang diperlukan dan data apa pun yang ingin Anda sertakan dalam badan permintaan.

Dengan mengintegrasikan Apidog ke dalam alur kerja Anda, Anda dapat menghemat waktu dan menghindari jebakan umum dalam pengembangan API. Plus, gratis untuk diunduh dan digunakan!

Jangan hanya percaya kata-kata kami—unduh Apidog secara gratis dan rasakan sendiri perbedaannya!

Menambahkan Lebih Banyak Kompleksitas: Parameter Kueri

Sekarang kita memiliki rute API dasar, mari kita tambahkan beberapa kompleksitas dengan menangani parameter kueri. Misalkan kita ingin memfilter daftar pengguna berdasarkan nama mereka. Kita dapat mencapai ini dengan memodifikasi file users.js kita:

// pages/api/users.js

export default function handler(req, res) {
  const { query } = req;
  const { name } = query;

  const users = [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' },
  ];

  if (name) {
    const filteredUsers = users.filter(user => user.name.toLowerCase().includes(name.toLowerCase()));
    res.status(200).json(filteredUsers);
  } else {
    res.status(200).json(users);
  }
}

Dengan pembaruan ini, API kita sekarang dapat memfilter pengguna berdasarkan parameter kueri name. Misalnya, menavigasi ke http://localhost:3000/api/users?name=john akan mengembalikan:

[
  { "id": 1, "name": "John Doe" }
]

Menangani Metode HTTP yang Berbeda

API sering kali perlu menangani metode HTTP yang berbeda seperti GET, POST, PUT, dan DELETE. Mari kita modifikasi file users.js kita untuk menangani permintaan POST untuk menambahkan pengguna baru:

// pages/api/users.js

let users = [
  { id: 1, name: 'John Doe' },
  { id: 2, name: 'Jane Doe' },
];

export default function handler(req, res) {
  const { method } = req;

  switch (method) {
    case 'GET':
      res.status(200).json(users);
      break;
    case 'POST':
      const { name } = req.body;
      const newUser = { id: users.length + 1, name };
      users.push(newUser);
      res.status(201).json(newUser);
      break;
    default:
      res.setHeader('Allow', ['GET', 'POST']);
      res.status(405).end(`Method ${method} Not Allowed`);
  }
}

Sekarang, API kita dapat menangani permintaan GET dan POST. Untuk menguji permintaan POST, Anda dapat menggunakan alat seperti Postman atau, lebih baik lagi, Apidog. Buat permintaan POST ke http://localhost:3000/api/users dengan badan JSON:

{
  "name": "Alice Smith"
}

Responsnya seharusnya adalah pengguna yang baru dibuat:

{
  "id": 3,
  "name": "Alice Smith"
}

Penanganan Kesalahan di API Next.js

Penanganan kesalahan yang kuat sangat penting untuk setiap API. Mari kita tingkatkan file users.js kita untuk menyertakan penanganan kesalahan untuk permintaan yang tidak valid:

// pages/api/users.js

let users = [
  { id: 1, name: 'John Doe' },
  { id: 2, name: 'Jane Doe' },
];

export default function handler(req, res) {
  const { method } = req;

  switch (method) {
    case 'GET':
      res.status(200).json(users);
      break;
    case 'POST':
      const { name } = req.body;
      if (!name) {
        res.status(400).json({ error: 'Name is required' });
      } else {
        const newUser = { id: users.length + 1, name };
        users.push(newUser);
        res.status(201).json(newUser);
      }
      break;
    default:
      res.setHeader('Allow', ['GET', 'POST']);
      res.status(405).end(`Method ${method} Not Allowed`);
  }
}

Sekarang, jika Anda mencoba membuat permintaan POST tanpa properti name di badan, Anda akan menerima respons kesalahan:

{
  "error": "Name is required"
}

Mengamankan API Next.js Anda

Keamanan adalah prioritas utama untuk setiap API. Mari kita terapkan otentikasi dasar untuk rute API kita. Kita akan menggunakan kunci API untuk mengotentikasi permintaan. Pertama, mari kita buat variabel lingkungan baru untuk kunci API kita. Buat file .env.local di root proyek Anda:

API_KEY=mysecretapikey

Selanjutnya, perbarui file users.js Anda untuk menyertakan otentikasi kunci API:

// pages/api/users.js

let users = [
  { id: 1, name: 'John Doe' },
  { id: 2, name: 'Jane Doe' },
];

export default function handler(req, res) {
  const { method, headers } = req;
  const apiKey = headers['x-api-key'];

  if (apiKey !== process.env.API_KEY) {
    return res.status(401).json

({ error: 'Unauthorized' });
  }

  switch (method) {
    case 'GET':
      res.status(200).json(users);
      break;
    case 'POST':
      const { name } = req.body;
      if (!name) {
        res.status(400).json({ error: 'Name is required' });
      } else {
        const newUser = { id: users.length + 1, name };
        users.push(newUser);
        res.status(201).json(newUser);
      }
      break;
    default:
      res.setHeader('Allow', ['GET', 'POST']);
      res.status(405).end(`Method ${method} Not Allowed`);
  }
}

Sekarang, rute API Anda memerlukan kunci API untuk otentikasi. Sertakan header x-api-key dalam permintaan Anda untuk mengakses API:

{
  "x-api-key": "mysecretapikey"
}

Kesimpulan

Membangun API dengan Next.js itu menyenangkan dan bermanfaat. Kita telah membahas dasar-dasar pembuatan rute API, menangani metode HTTP yang berbeda, penanganan kesalahan, dan menambahkan keamanan. Selain itu, kami telah memperkenalkan Anda pada Apidog, alat fantastis untuk mendesain, menguji, dan mendokumentasikan API Anda.

Baik Anda seorang pengembang berpengalaman atau baru memulai, Next.js dan Apidog menyediakan alat yang Anda butuhkan untuk membangun API yang hebat dan terukur. Jadi, tunggu apa lagi? Mulai bangun API Next.js Anda hari ini, dan jangan lupa untuk mengunduh Apidog secara gratis untuk menyederhanakan proses pengembangan Anda.

button