Cách sử dụng các tuyến API Next.js

Tìm hiểu kỹ thuật mạnh mẽ này do Next.js cung cấp để tạo điểm cuối API trong ứng dụng Next.js

Ngoài việc tạocác tuyến trang, có nghĩa là các trang được cung cấp cho trình duyệt dưới dạng các trang Web, Next.js có thể tạoCác tuyến API.

Đây là một tính năng rất thú vị vì nó có nghĩa là Next.js có thể được sử dụng để tạo giao diện người dùng cho dữ liệu được lưu trữ và truy xuất bởi chính Next.js, chuyển JSON thông qua các yêu cầu tìm nạp.

Các tuyến API hoạt động dưới/pages/api/thư mục và được ánh xạ tới/apiđiểm cuối.

Tính năng này làrấthữu ích khi tạo ứng dụng.

Trong các tuyến đó, chúng tôi viết mã Node.js (chứ không phải mã React). Đó là một sự thay đổi mô hình, bạn chuyển từ frontend sang backend, nhưng rất liền mạch.

Nói rằng bạn có một/pages/api/comments.jstệp, có mục tiêu là trả lại các nhận xét của một bài đăng trên blog dưới dạng JSON.

Giả sử bạn có một danh sách các nhận xét được lưu trữ trong mộtcomments.jsontập tin:

[
  {
    "comment": "First"
  },
  {
    "comment": "Nice post"
  }
]

Đây là một mã mẫu, trả về cho khách hàng danh sách các nhận xét:

import comments from './comments.json'
export default (req, res) => {
res.status(200).json(feeds)
}

Nó sẽ lắng nghe trên/api/commmentsURL cho các yêu cầu GET và bạn có thể thử gọi nó bằng trình duyệt của mình:

Các tuyến API cũng có thể sử dụngđịnh tuyến độngthích các trang, sử dụng[]cú pháp để tạo một tuyến API động, như/pages/api/comments/[id].jssẽ truy xuất các nhận xét cụ thể cho một id bài đăng.

Bên trong[id].jsbạn có thể lấyidgiá trị bằng cách tìm kiếm nó bên trongreq.queryvật:

import comments from '../comments.json'
export default (req, res) => {
res.status(200).json({ post: req.query.id, comments })
}

Ở đây, bạn có thể thấy đoạn mã trên đang hoạt động:

Trong các trang động, bạn cần nhậpuseRoutertừnext/router, sau đó lấy đối tượng bộ định tuyến bằng cách sử dụngconst router = useRouter(), và sau đó chúng tôi có thể có đượcidgiá trị sử dụngrouter.query.id.

Ở phía máy chủ, tất cả đều dễ dàng hơn, vì truy vấn được đính kèm với đối tượng yêu cầu.

Nếu bạn thực hiện một yêu cầu ĐĂNG, tất cả đều hoạt động theo cùng một cách - tất cả đều thông qua quá trình xuất mặc định đó.

Để tách POST khỏi GET và các phương thức HTTP khác (PUT, DELETE), hãy tra cứureq.methodgiá trị:

export default (req, res) => {
  switch (req.method) {
    case 'GET':
      //...
      break
    case 'POST':
      //...
      break
    default:
      res.status(405).end() //Method Not Allowed
      break
  }
}

Ngoàireq.queryvàreq.methodchúng tôi đã thấy, chúng tôi có quyền truy cập vào cookie bằng cách tham chiếureq.cookies, cơ quan yêu cầu trongreq.body.

Dưới mui xe, tất cả đều được cung cấp bởiVi mô, một thư viện hỗ trợ các vi dịch vụ HTTP không đồng bộ, được thực hiện bởi cùng một nhóm đã xây dựng Next.js.

Bạn có thể sử dụng bất kỳ phần mềm trung gian Micro nào trong các tuyến API của chúng tôi để thêm nhiều chức năng hơn.

Tải xuống miễn phí của tôiSổ tay Next.js

Cách sử dụng các tuyến API Next.js

Tìm hiểu kỹ thuật mạnh mẽ này do Next.js cung cấp để tạo điểm cuối API trong ứng dụng Next.js

Thêm các bài hướng dẫn tiếp theo: