Nguyên tắc hoạt động cơ bản của framework NextJS

Trong các bài học trước, chúng ta đã cài đặt framework NextJS và làm quen với cấu trúc cơ bản của nó. Đã đến lúc bắt tay vào công việc chính.

Phần chính của NextJS là định tuyến. Định tuyến hoạt động như sau: khi người dùng nhập vào thanh địa chỉ trình duyệt một URL nào đó, framework NextJS sẽ trả về trình duyệt một tệp cụ thể, tương ứng với URL đó.

Định tuyến trong NextJS được tổ chức theo một cách đặc biệt. Bản chất của nó là mỗi URL được yêu cầu tương ứng với một thư mục bên trong src/app.

Đồng thời, bên trong thư mục phải có tệp với tên là page.jsx. Chính tệp này sẽ được trả về trình duyệt. Hơn nữa, trong tệp này chúng ta sẽ viết mã JSX, còn trình duyệt sẽ nhận được mã HTML hoàn chỉnh của trang.

Hãy xem một ví dụ. Giả sử chúng ta muốn tại URL /test/ trả về một đoạn văn bản nào đó.

Hãy tạo thư mục tương ứng: src/app/test. Bên trong thư mục này, tạo tệp page.jsx với nội dung sau:

Hãy mở URL của chúng ta trong trình duyệt: /test. Và bạn sẽ thấy đoạn văn bản chúng ta đã viết bên trong tệp JSX.

Hãy thử thay đổi văn bản và lưu tệp. Sau đó, văn bản sẽ tự động thay đổi trong trình duyệt. Đó là cách NextJS hoạt động ở chế độ phát triển.