Bộ xử lý tuyến đường
Thuộc phần Kiến thức thiết yếu về Next.js trong hành trình React của Coddy. Bài học 37 trên 47.
Các thành phần phía máy chủ đáp ứng hầu hết nhu cầu về dữ liệu vì chúng vốn đã chạy trên máy chủ. Nhưng đôi khi trình duyệt cần yêu cầu dữ liệu sau đó, sau một cú nhấp hoặc khi người dùng ngừng nhập vào hộp tìm kiếm. Khi đó, bạn cần một endpoint để gọi.
Thư mục có tệp route.js bên trong sẽ trở thành đúng đường dẫn đó. Quy tắc định tuyến giống như với các trang, chỉ khác tệp đặc biệt:
app/
api/
dishes/
route.js -> /api/dishesBên trong, bạn xuất một hàm có tên trùng với phương thức HTTP:
import { dishes } from '../../../lib/dishes.js';
export async function GET() {
return Response.json(dishes);
}Response.json(...) là toàn bộ phản hồi: nó tuần tự hóa giá trị và đặt kiểu nội dung JSON. Bạn cũng có thể xuất POST, PUT, DELETE từ cùng một tệp.
Sau đó, phần phía client là code trình duyệt thông thường:
const res = await fetch('/api/dishes');
const data = await res.json();Có hai điều cần nhớ. Một thư mục có thể chứa page.jsx hoặc route.js, không bao giờ chứa cả hai: cả hai đều sẽ dùng cùng một URL. Và route.js không phải là một thành phần: nó trả về một Response, không phải JSX.
Dùng route handler khi trình duyệt cần dữ liệu theo yêu cầu hoặc khi có thứ gì đó bên ngoài ứng dụng cần gọi vào. Nếu component phía máy chủ có thể đọc dữ liệu ngay khi kết xuất, hãy để nó làm việc đó.
Thử thách
Trung bìnhTạo một API nhỏ và gọi API đó từ trình duyệt.
- Trong
app/api/dishes/route.js, xuất mộtasync function GETtrả vềdishesdưới dạng JSON. - Trong
components/DishLoader.jsx, hoàn thiệnloadDishes: gọi/api/dishesbằng fetch, đọc nội dung JSON và lưu các tên món ăn bằngsetNames.
Khi nhấp vào #load-btn, danh sách #dish-list phải hiển thị đủ cả bốn tên.
Tự làm thử
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
Tự kiểm traBài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.
Tất cả bài học trong Kiến thức thiết yếu về Next.js
4Máy chủ và client
Hai loại thành phầnĐọc lỗiDòng 'use client'Giữ phần client nhỏ gọnMáy chủ bên trong clientTóm tắt: máy chủ và client7Điều hướng phía máy khách
Liên kết đang hoạt độngĐiều hướng bằng codeLọc bằng URLBộ xử lý tuyến đườngÔn tập: Điều hướng