Cách sử dụng API Router trong Next.js

Giới thiệu về Next Js

Next.js là một framework web cho React, được phát triển bởi Vercel (trước đây là Zeit). Next.js giúp cho việc xây dựng các ứng dụng web React đơn giản hơn và nhanh hơn, 

đồng thời cung cấp nhiều tính năng tiên tiến như Server-Side Rendering (SSR). Static Site Generation (SSG), code splitting và hot reloading.

Ngoài ra, Next.js cũng hỗ trợ nhiều thư viện và công nghệ phổ biến trong cộng đồng React, như Redux, TypeScript, styled-components và nhiều hơn nữa.

Với các tính năng và lợi ích mà nó mang lại, Next.js đã trở thành một lựa chọn phổ biến cho các ứng dụng web React của các công ty lớn và nhỏ trên toàn thế giới.

Đôi chút về API Router trong Next.js

API Router là một tính năng mới được giới thiệu từ phiên bản Next.js 9.4. Nó cho phép bạn tạo các endpoint API một cách dễ dàng và linh hoạt, giúp tách biệt giữa phần Front-end và Back-end trong ứng dụng web. 

Với API Router, bạn có thể tạo ra các API endpoint để cung cấp dữ liệu cho phần Front-end của ứng dụng hoặc để thực hiện các thao tác CRUD (Create, Read, Update, Delete) trên cơ sở dữ liệu.

Cách sử dụng API Router trong Next.js khá đơn giản và dễ hiểu. Bạn có thể tạo các file .js trong thư mục api của dự án để định nghĩa các endpoint API. 

Và với API Router, bạn có thể sử dụng các phương thức HTTP như GET, POST, PUT và DELETE để thao tác với các endpoint này.

Ví dụ về API Router trong Next.js

Để minh họa cho cách sử dụng API Router trong Next.js, dưới đây là một ví dụ đơn giản về việc tạo một endpoint API trả về dữ liệu văn bản “Hello World!”:

Trong thư mục api của dự án, tạo một file tên là hello.js với nội dung như sau:

Cách sử dụng API Router trong Next.js khá đơn giản và dễ hiểu. Bạn có thể tạo các file .js trong thư mục api của dự án để định nghĩa các endpoint API. 

				
					export default <a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> handler(req, res) {
  res.status(200).json({ text: 'Hello World!' })
}

				
			

Trong đoạn code trên, hàm handler được sử dụng để xử lý các yêu cầu đến endpoint API. Trong trường hợp này, chúng ta đơn giản chỉ trả về một đối tượng JSON có trường text chứa nội dung “Hello World!”. 

Sau đó, chúng ta sử dụng phương thức res.status(200) để trả về mã trạng thái HTTP 200 – OK và gọi hàm json() để định dạng dữ liệu trả về dưới dạng JSON.

Kết luận và bài viết có liên quan

Kết luận:API Router là một tính năng rất hữu ích trong Next.js giúp cho việc tách biệt giữa phần Front-end và Back-end trong ứng dụng web trở nên dễ dàng hơn. Với API Router, bạn có thể tạo các endpoint API để cung cấp dữ liệu cho phần Front-end hoặc để thực hiện các thao tác CRUD trên cơ sở dữ liệu.
Bài viết có liên quan: Server-side Rendering vs Client-side Rendering tìm hiểu sự khác biệt và lợi ích trong Next.js cho người mới học Next.js ( important ) Tích hợp typeScript trong Next Js Cần Thiết Với Lập Trình Viên Next Js là gì? và Next Js có phải React Js? ( cái nào quan trọng hơn )

Leave a Reply

Your email address will not be published. Required fields are marked *