Tạo màn hình bằng Next.js

Tram Ho

Install cần thiết

Chạy command sau để có thể viết được TypeScript

Tạo template màn hình

Trước khi tạo các màn hình, tạo file mẫu.

Trong file mẫu lần này sẽ định nghĩa common cho phần header và footer.

※ Bài viết này không chú trọng vào phần style nên sẽ sử dụng bulma của CSS framework.

Tạo file layout.tsx trong thư mục Components.

Thông qua các hàm function getHeader() và function getFooter() để mô tả xử lý riêng bằng biến.

Tạo màn hình gốc di chuyển

Tạo màn hình kiểu như màn hình login để làm màn hình gốc di chuyển.

Tạo file login.tsx trong thư mục Pages.

Tạo màn hình đích di chuyển

Tạo màn hình kiểu như màn hình My Page để làm màn hình đích di chuyển.

Install library cần thiết để có thể call được API.

**Tạo file user.tsx trong thư mục Pages

Khi hiển thị màn hình sẽ chạy hàm getInitialProps() và gọi API http://localhost/api/user

Xử lý gọi API external

Tạo xử lý gọi bằng file đã tạo ở trên.

Dựa vào vị trí mô tả ở component và page, có thể chạy bằng bên server hoặc client đều được. Trường hợp là cấu trúc SSR thì không thể gọi API external bên client được.

Sau đây là cách tạo để có thể gọi được API thông qua Next.js server.

Tạo API gọi bên phía Next.js

Chú ý:
Phần study-next_web_1 là tên của container, nên hay thay đổi để phù hợp với tên container sử dụng.

Tạo xử lý API external

Tạo user.php trong thư mục web, tạo php dùng để trả về bằng json.

Lời cuối

Trên đây là mô tả đơn giản về cách tạo màn hình theo template, di chuyển màn hình và lấy data từ external server.

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo