Cara Mencipta dan Menggunakan API REST dalam Next.js

Next.js terkenal secara meluas kerana keupayaannya dalam pemaparan sebelah pelayan dan penjanaan tapak statik, tetapi ia juga membolehkan anda membina aplikasi lengkap dengan pelayan -fungsi sampingan, termasuk API. Dengan Next.js, anda boleh mencipta REST API secara langsung dalam rangka kerja itu sendiri, yang boleh digunakan oleh aplikasi bahagian hadapan anda atau mana-mana perkhidmatan luaran.

Dalam catatan blog ini, kami akan membincangkan cara mencipta API REST yang mudah dalam Next.js dan cara menggunakan API tersebut dalam aplikasi anda dan juga secara luaran. Pada akhirnya, anda akan mempunyai pemahaman yang kukuh tentang cara membina dan berinteraksi dengan API dalam projek Next.js.

Mencipta API REST dalam Next.js

Next.js menyediakan cara mudah untuk membina laluan API menggunakan direktori halaman/api. Setiap fail yang anda buat dalam direktori ini secara automatik menjadi titik akhir API, di mana nama fail sepadan dengan laluan titik akhir.

Langkah 1: Sediakan Projek Next.js Baharu

Jika anda belum mempunyai projek Next.js, anda boleh membuat projek dengan mudah dengan menjalankan arahan berikut:

npx create-next-app my-next-api-project
cd my-next-api-project
npm install mongodb
npm run dev

Ini akan mencipta aplikasi Next.js asas dan memulakan pelayan pembangunan. Anda kini boleh mula membina REST API anda.

Langkah 2: Buat Laluan API Anda

Dalam Next.js, laluan API dibuat dalam folder halaman/api. Contohnya, jika anda ingin mencipta API mudah untuk mengurus pengguna, anda boleh mencipta fail bernama users.js di dalam direktori pages/api.

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

Di dalam users.js, anda boleh menentukan laluan API. Berikut ialah contoh mudah yang bertindak balas dengan senarai pengguna:

// pages/api/users.js
export default function handler(req, res) {
  // Define a list of users
  const users = [
    { id: 1, name: "John Doe", email: "john@example.com" },
    { id: 2, name: "Jane Smith", email: "jane@example.com" },
  ];

  // Send the list of users as a JSON response
  res.status(200).json(users);
}

Langkah 3: Cipta Utiliti Sambungan MongoDB
Untuk memastikan anda tidak membuka sambungan pangkalan data baharu dengan setiap permintaan API, sebaiknya buat utiliti sambungan MongoDB yang boleh diguna semula. Anda boleh melakukan ini dengan mencipta fail lib/mongodb.js, yang mengendalikan penyambungan ke tika MongoDB anda dan menggunakan semula sambungan.

Berikut ialah contoh utiliti sambungan MongoDB yang mudah:

// lib/mongodb.js
import { MongoClient } from 'mongodb';

const client = new MongoClient(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

let clientPromise;

if (process.env.NODE_ENV === 'development') {
  // In development, use a global variable so the MongoDB client is not re-created on every reload
  if (global._mongoClientPromise) {
    clientPromise = global._mongoClientPromise;
  } else {
    global._mongoClientPromise = client.connect();
    clientPromise = global._mongoClientPromise;
  }
} else {
  // In production, it’s safe to use the MongoClient directly
  clientPromise = client.connect();
}

export default clientPromise;

Langkah 4: Sediakan URI MongoDB dalam .env.local
Untuk menyimpan URI MongoDB anda dengan selamat, cipta fail .env.local dalam direktori akar projek anda. Tambahkan URI MongoDB anda di sini:

# .env.local
MONGODB_URI=mongodb+srv://<your-user>:<your-password>@cluster0.mongodb.net/mydatabase?retryWrites=true&w=majority

Jika anda menggunakan MongoDB Atlas, anda boleh mendapatkan URI ini daripada papan pemuka Atlas.

Langkah 5: Cipta Laluan API untuk Berinteraksi dengan MongoDB

Anda boleh mengendalikan kaedah HTTP yang berbeza (GET, POST, PUT, DELETE) dalam API anda dengan memeriksa sifat req.method. Berikut ialah versi kemas kini fail users.js yang bertindak balas secara berbeza berdasarkan kaedah HTTP.

npx create-next-app my-next-api-project
cd my-next-api-project
npm install mongodb
npm run dev

Kini, API anda mampu mengendalikan permintaan GET, POST, PUT dan DELETE untuk mengurus pengguna.

• GET mengambil semua pengguna.
• POST menambah pengguna baharu.
• PUT mengemas kini pengguna sedia ada.
• PADAM mengalih keluar pengguna.

Langkah 6: Menguji API

Sekarang anda telah menyediakan API, anda boleh mengujinya dengan membuat permintaan menggunakan alat seperti Posmen atau cURL. Berikut ialah URL untuk setiap kaedah:

• DAPATKAN permintaan kepada /api/users untuk mendapatkan semula senarai pengguna.
• POST permintaan kepada /api/users untuk mencipta pengguna baharu (hantar data pengguna dalam badan permintaan).
• LETAKKAN permintaan kepada /api/users untuk mengemas kini pengguna sedia ada (hantar data pengguna dalam badan permintaan).
• PADAM permintaan kepada /api/users untuk memadam pengguna (hantar ID pengguna dalam badan permintaan).

Langkah 5: Melindungi API Anda (Pilihan)

Anda mungkin ingin menambah beberapa pengesahan atau kebenaran asas pada API anda untuk menghalang akses tanpa kebenaran. Anda boleh melakukan ini dengan mudah dengan memeriksa req.headers atau menggunakan pembolehubah persekitaran untuk menyimpan kunci API. Contohnya:

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

Menggunakan API REST dalam Aplikasi Next.js Anda

Sekarang anda telah menyediakan API, mari lihat cara menggunakannya dalam aplikasi Next.js anda. Terdapat pelbagai cara untuk menggunakan API, tetapi pendekatan yang paling biasa ialah menggunakan fetch (atau perpustakaan seperti Axios) untuk membuat permintaan HTTP.

Langkah 1: Ambil Data dengan getServerSideProps

Jika anda perlu mengambil data daripada API anda di bahagian pelayan, anda boleh menggunakan getServerSideProps Next.js untuk mengambil data sebelum memaparkan halaman. Berikut ialah contoh cara anda boleh menggunakan titik akhir /api/users anda di dalam komponen halaman:

// pages/api/users.js
export default function handler(req, res) {
  // Define a list of users
  const users = [
    { id: 1, name: "John Doe", email: "john@example.com" },
    { id: 2, name: "Jane Smith", email: "jane@example.com" },
  ];

  // Send the list of users as a JSON response
  res.status(200).json(users);
}

Dalam contoh ini, apabila pengguna melawat halaman /users, getServerSideProps akan mengambil senarai pengguna daripada API sebelum memaparkan halaman. Ini memastikan bahawa data sudah tersedia apabila halaman dimuatkan.

Langkah 2: Ambil Data Bahagian Pelanggan dengan useEffect

Anda juga boleh menggunakan bahagian klien API menggunakan cangkuk useEffect React. Ini berguna untuk mengambil data selepas halaman dimuatkan.

// lib/mongodb.js
import { MongoClient } from 'mongodb';

const client = new MongoClient(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

let clientPromise;

if (process.env.NODE_ENV === 'development') {
  // In development, use a global variable so the MongoDB client is not re-created on every reload
  if (global._mongoClientPromise) {
    clientPromise = global._mongoClientPromise;
  } else {
    global._mongoClientPromise = client.connect();
    clientPromise = global._mongoClientPromise;
  }
} else {
  // In production, it’s safe to use the MongoClient directly
  clientPromise = client.connect();
}

export default clientPromise;

Dalam contoh ini, permintaan API dibuat selepas komponen dipasang dan senarai pengguna dikemas kini dalam keadaan komponen.

Langkah 3: Buat Permintaan POST untuk Menambah Data

Untuk menghantar data ke API anda, anda boleh menggunakan permintaan POST. Berikut ialah contoh cara anda boleh menghantar data pengguna baharu ke titik akhir /api/users anda:

# .env.local
MONGODB_URI=mongodb+srv://<your-user>:<your-password>@cluster0.mongodb.net/mydatabase?retryWrites=true&w=majority

Dalam contoh ini, nama dan e-mel pengguna baharu dihantar ke API sebagai permintaan POST. Setelah permintaan berjaya, makluman ditunjukkan.

Kesimpulan

Next.js menjadikannya sangat mudah untuk membina dan menggunakan API REST secara langsung dalam rangka kerja yang sama. Dengan menggunakan ciri laluan API, anda boleh mencipta titik akhir tanpa pelayan yang boleh mengendalikan operasi CRUD dan menyepadukannya dengan lancar dengan bahagian hadapan anda.

Dalam siaran ini, kami telah membincangkan cara membuat API REST dalam Next.js, mengendalikan kaedah HTTP yang berbeza dan menggunakan API tersebut di bahagian pelayan (dengan getServerSideProps) dan pihak klien (menggunakan useEffect). Ini membuka banyak kemungkinan untuk membina aplikasi tindanan penuh dengan konfigurasi minimum.

Next.js terus memperkasakan pembangun dengan penyelesaian yang fleksibel dan mudah untuk membina aplikasi berskala dengan fungsi bahagian belakang bersepadu. Selamat mengekod!

Atas ialah kandungan terperinci Cara Mencipta dan Menggunakan API REST dalam Next.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!