Cách xây dựng và sử dụng API trong Next.js
Đã qua rồi cái thời bạn phải tạo một chương trình phụ trợ riêng cho trang web của mình. Với định tuyến API dựa trên tệp Next.js, bạn có thể làm cho cuộc sống của mình dễ dàng hơn bằng cách viết API của bạn bên trong dự án Next.js.
Next.js là một meta-framework React với các tính năng giúp đơn giản hóa quá trình xây dựng các ứng dụng web sẵn sàng sản xuất. Bạn sẽ thấy cách xây dựng API REST trong Next.js và sử dụng dữ liệu từ API đó trên trang Next.js.
Mục Lục
Tạo một dự án Next.js bằng create-next-app
Bạn có thể tạo một dự án Next.js mới bằng cách sử dụng công cụ CLI tạo ứng dụng tiếp theo. Nó cài đặt các gói và tệp cần thiết để giúp bạn bắt đầu xây dựng ứng dụng Next.js.
Chạy lệnh này trong một thiết bị đầu cuối để tạo một thư mục Next.js mới được gọi là api-route. Bạn có thể nhận được lời nhắc cài đặt ứng dụng tạo tiếp theo.
npx create-next-app api-routes
Khi lệnh kết thúc, hãy mở thư mục api-lines để bắt đầu tạo các tuyến API.
Định tuyến API trong Next.js
Các tuyến API chạy trên máy chủ và có nhiều công dụng như lưu dữ liệu người dùng vào cơ sở dữ liệu hoặc tìm nạp dữ liệu từ API mà không làm tăng lỗi chính sách CORS.
Trong Next.js, bạn phải tạo các tuyến API bên trong thư mục / pages / api. Next.js tạo các điểm cuối API cho từng tệp trong thư mục này. Nếu bạn thêm user.js vào / pages / api, Next.js sẽ tạo một điểm cuối tại http: // localhost: 3000 / api / user.
Một tuyến API Next.js cơ bản có cú pháp sau.
export default function handler(req, res) {
res.status(200).json({ name: 'John Doe' })
}
Bạn phải xuất hàm xử lý để nó hoạt động.
Tạo các tuyến API
Tạo một tệp mới có tên là todo.js trong / pages / api thư mục để thêm một tuyến API cho các mục việc cần làm.
Chế nhạo Cơ sở dữ liệu Todo
Để có được các việc cần làm, bạn phải tạo một điểm cuối GET. Vì sự đơn giản. Hướng dẫn này sử dụng một mảng các việc cần làm thay vì cơ sở dữ liệu nhưng bạn có thể thoải mái sử dụng cơ sở dữ liệu như MongoDB hoặc MySQL.
Tạo các mục việc cần làm trong todo.js trong thư mục gốc của ứng dụng của bạn, sau đó thêm dữ liệu sau.
export const todos = [
{
id: 1,
todo: "Do something nice for someone I care about",
completed: true,
userId: 26,
},
{
id: 2,
todo: "Memorize the fifty states and their capitals",
completed: false,
userId: 48,
},
];
Các mục việc cần làm này là từ trang web DummyJSON, một API REST cho dữ liệu giả. Bạn có thể tìm thấy dữ liệu chính xác từ điểm cuối DummyJSON todos này.
Tiếp theo, tạo tuyến API trong /pages/api/todos.js và thêm chức năng xử lý.
import { todos } from "../../todo";export function handler(req, res) {
const { method } = req;
switch (method) {
case "GET":
res.status(200).json(todos);
break;
case "POST":
const { todo, completed } = req.body;
todos.push({
id: todos.length + 1,
todo,
completed,
});
res.status(200).json(todos);
break;
default:
res.setHeader("Allow", ["GET", "POST"]);
res.status(405).end(`Method ${method} Not Allowed`);
break;
}
}
Tuyến đường này xử lý các điểm cuối GET và POST. Nó trả về tất cả các việc cần làm cho yêu cầu GET và thêm một mục việc cần làm vào cơ sở dữ liệu việc làm cho một yêu cầu ĐĂNG. Đối với các phương thức khác, trình xử lý trả về lỗi.
Sử dụng các tuyến API trong giao diện người dùng
Bạn đã tạo một điểm cuối API trả về một đối tượng JSON chứa một mảng các việc cần làm.
Để sử dụng API, hãy tạo một hàm có tên fetchTodos lấy dữ liệu từ điểm cuối API. Hàm sử dụng phương thức tìm nạp nhưng bạn cũng có thể sử dụng Axios để thực hiện các yêu cầu API. Sau đó, gọi chức năng này khi bạn nhấp vào một nút.
import Head from "next/head";
import { useState } from "react"; export default function Home() {
const [todos, settodos] = useState([]);
const fetchTodos = async () => {
const response = await fetch("/api/todos");
const data = await response.json();
settodos(data);
};
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<button onClick={fetchTodos}>Get todos</button>
<ul>
{todos.map((todo) => {
return (
<li
style={{ color: `${todo.completed ? "green" : "red"}` }}
key={todo.id}
>
{todo.todo}:{todo.completed}.
</li>
);
})}
</ul>
</main>
</div>
);
}
Danh sách trong đoạn mã này hiển thị các mục việc cần làm khi chúng được tìm nạp.
Đối với điểm cuối POST, hãy tạo một hàm mới được gọi là saveTodo để thực hiện một yêu cầu POST tới API. Yêu cầu tìm nạp lưu trữ mục việc cần làm mới trong nội dung và trả về tất cả các mục việc cần làm bao gồm cả mục mới. Sau đó, hàm saveTodo sẽ lưu trữ chúng ở trạng thái việc cần làm.
const saveTodo = async () => {
const response = await fetch("/api/todos", {
method: "POST",
body: JSON.stringify(newTodo),
headers: {
"Content-Type": "application/json",
},
});const data = await response.json();
settodos(data);
};
Sau đó, tạo biểu mẫu có thanh nhập văn bản để nhận mục việc cần làm mới. Hàm xử lý đệ trình của biểu mẫu này sẽ gọi hàm saveTodo.
import Head from "next/head";
import { useReducer, useState } from "react";
import styles from "../styles/Home.module.css";export default function Home() {
const [todos, settodos] = useState([]);
const [newTodo, setnewTodo] = useState({
todo: "",
completed: false,
});
const fetchTodos = async () => {
};
const saveTodo = async (e) => {
const response = await fetch("/api/todos", {
method: "POST",
body: JSON.stringify(newTodo),
headers: {
"Content-Type": "application/json",
},
});
const data = await response.json();
settodos(data);
};
const handleChange = (e) => {
setnewTodo({
todo: e.target.value,
});
};
const handleSubmit = (e) => {
e.preventDefault();
saveTodo();
setnewTodo({
todo: '',
});
};
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<button onClick={fetchTodos}>Get todos</button>
<form onSubmit={handleSubmit}>
<input type="text" onChange={handleChange} value={newTodo.todo} />
</form>
<ul>
{
</ul>
</main>
</div>
);
}
Trình xử lý thêm một việc cần làm mới vào cơ sở dữ liệu mỗi khi người dùng gửi biểu mẫu. Ngoài ra, chức năng này cập nhật giá trị việc cần làm bằng cách sử dụng dữ liệu nhận được từ API, từ đó thêm mục việc cần làm mới vào danh sách.
Định tuyến API chỉ là một trong những điểm mạnh của Next.js
Bạn đã thấy cách bạn xây dựng và sử dụng một tuyến API Next.js. Bây giờ bạn có thể tạo một ứng dụng ngăn xếp đầy đủ mà không cần rời khỏi thư mục dự án Next.js của mình. Định tuyến API là một trong nhiều lợi ích mà Next.js cung cấp.
Next.js cũng cung cấp các tính năng tối ưu hóa hiệu suất như tách mã, tải chậm và hỗ trợ CSS tích hợp. Nếu bạn đang xây dựng một trang web cần tốc độ nhanh và thân thiện với SEO, bạn nên xem xét Next.js.