Next.js bổ sung gì
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 1 trên 47.
Bạn đã biết cách xây dựng các thành phần bằng React. Vậy tại sao hầu hết ứng dụng React thực tế đều dùng thêm một framework?
Vì React tự nó chỉ làm một việc: biến các component thành những gì hiển thị trên màn hình. Mọi thứ khác, bạn phải tự xây dựng:
- Trang và URL: React không biết URL là gì
- Lấy dữ liệu: bạn lấy dữ liệu trong trình duyệt sau khi trang đã tải xong
- Lưu dữ liệu: bạn tự viết API
Next.js giải quyết chính xác những điểm còn thiếu đó. Cách giải quyết rất thẳng thắn:
- Một thư mục là một URL
- Các thành phần chạy trên máy chủ theo mặc định, nên chúng có thể tải dữ liệu trước khi trang được gửi đi
- Một hàm có thể lưu dữ liệu mà không cần viết API
Điểm cuối cùng này đáng để dừng lại một chút. Trong khóa học này, bạn sẽ lấy dữ liệu bằng await thông thường ngay trong một component, không cần vòng xoay tải và không cần useEffect, vì component đã chạy trên máy chủ trước khi người dùng nhìn thấy bất cứ thứ gì.
Mọi điều bạn đã học trong phần Nền tảng vẫn được áp dụng: đây vẫn là những thành phần, props và JSX như trước. Next.js là lớp nền tảng bao quanh chúng.
Thử thách
Người mớiĐây là trang Next.js đầu tiên của bạn, mình đã viết sẵn.
Bạn cần làm:
- Xem tệp nằm ở đâu:
app/page.jsx. - Nhấn nút Chạy.
- Bản xem trước hiển thị trang đó tại URL
/.
Không có gì đăng ký tuyến đường đó, chính thư mục đã làm việc này. Đây là ý tưởng làm nền tảng cho cả phần này.
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