Chuyển đổi dự án Next.js thành Zalo Mini App

thanhdigi · #1 20-12-2023, 04:38 PM

Hệ thống quảng cáo SangNhuong.com

Zalo Mini App là một nền tảng mới mẻ và tiềm năng cho các ứng dụng web. Nếu bạn đã quen với Next.js, một framework phổ biến cho React, bạn sẽ thấy rất dễ dàng để chuyển đổi các dự án của bạn sang Zalo Mini App. Bạn sẽ được hưởng các ưu điểm của Next.js và Zalo Mini App mà không cần phải học lại từ đầu.

1. Next.js là gì?

Next.js là một framework cho React, một thư viện JavaScript để xây dựng giao diện người dùng. Next.js cho phép bạn tạo các ứng dụng web front-end mạnh mẽ và linh hoạt. Next.js là một dự án mã nguồn mở với nhiều tính năng đặc biệt như render trên server (SSR) và tạo các trang web tĩnh. Next.js không làm thay đổi React, mà chỉ bổ sung thêm các chức năng cho nó. Khi bạn sử dụng SSR, máy chủ có thể truy xuất và xử lý dữ liệu cần thiết, cũng như JavaScript, để tạo ra trang web. Trang web sau đó được gửi về trình duyệt và hiển thị ngay tức thì. SSR giúp các trang web tải nhanh hơn và cải thiện trải nghiệm người dùng với khả năng phản hồi cao hơn.

Ngoài ra, SSR cũng có ích cho SEO. Giúp trang web của bạn có thứ hạng cao hơn trên các công cụ tìm kiếm. SSR làm cho các trang web dễ dàng được quét bởi các SEO trackers do chúng có tốc độ tải nhanh và nhiều nội dung có thể được phân tích.

2. Cách chuyển đổi từ dự án Next.js thành Zalo Mini App

Đầu tiên, xin nhắc bạn rằng:

Khi bạn muốn chuyển web app hiện tại bằng Next.js sang Zalo Mini App, bạn phải chú ý rằng các tính năng Server-Side Rendering (SSR) hoặc Static Site Generation (SSG) sẽ không áp dụng được.

2.1. Tổng quan

Bạn cần làm theo các bước sau đây để chuyển ứng dụng Next.js sang Zalo Mini App:

Xuất ứng dụng Next.js ra static site

Tạo Zalo Mini App và kết nối với App ID của bạn.

Cài đặt app-config.json

Chuyển hình ảnh và các resources nặng lên CDN

Deploy và Publish

2.2. Xuất ứng dụng Next.js ra static site

Khi bạn xuất Next.js thành static site, bạn sẽ có nhiều file *.html, mỗi file chứa HTML + CSS và JS cần thiết để render 1 page hoàn chỉnh, theo tính năng SSG đặc biệt của Next.js.

Việc chuyển đổi Next.js sang Mini App có nhiều thách thức. Bởi vì Zalo Mini App có kiến trúc giống với các thư viện/framework SPA như React/Vue.js hơn: một root element được Zalo Mini App cấp sẵn trong index.html mà Zalo Mini App tự tạo ra cho mỗi ứng dụng. Nhà phát triển sẽ render app của mình vào root element đó bằng cách khai báo các resources trong app-config.json, bao gồm các array listSyncJS, listAsyncJS và listCSS. Zalo Mini App không sử dụng các file *.html mà Next.js tạo ra khi xuất.

Trước khi xây dựng và xuất web app Next.js của bạn, bạn cần thiết lập basepath trong next.config.js. Bạn có thể tham khảo ví dụ sau:

Sau đó, bạn chỉ cần chạy next build là xong.

2.3. Tạo Zalo Mini App và kết nối với App ID của bạn.

Đây là bước dễ dàng nhất vì bạn chỉ cần sử dụng ZMP CLI và nhập một số lệnh: app id

Tiếp theo, bạn nhập Zalo Mini App ID của bạn và quét QR để đăng nhập bằng ứng dụng Zalo.

2.4. Cấu hình app-config.json

Đây là bước quan trọng nhất trong quá trình chuyển đổi. Bạn cần chuyển đổi các file CSS/JS trong index.html (kết quả của Next.js khi xuất ra static sites) sang app-config.json (được sử dụng bởi index.html của Zalo Mini App khi chạy trên Zalo).

Bạn cũng có thể dùng lệnh zmp sync-config để tự động ánh xạ các resources từ index.html sang app-config.json. Ví dụ:

Bên cạnh các resource trên, Next.js còn thêm vào trang một thẻ script đặc biệt

CHUYÊN MỤC ĐƯỢC TÀI TRỢ BỞI