Với sự phát triển nhanh chóng của Zalo Mini App, thì việc tìm hiểu và chuyển đổi dự án Next.js thành Zalo Mini App chắc chắn sẽ đem lại nhiều lợi ích và cơ hội mới cho các nhà phát triển. Hãy để DigiBird hướng dẫn bạn chuyển đổi nha.
Và nếu như bạn chưa biết Zalo Mini App là gì? Hãy đọc bài viết sau: Zalo Mini App là gì? Giải pháp giúp doanh nghiệp x5 doanh thu
1. Next.js là gì?
Next.js là một framework dựa trên React cho phép bạn tạo các ứng dụng web front-end hiệu quả và tùy biến. Next.js là một dự án mã nguồn mở có nhiều tính năng nổi bật như hỗ trợ render trên server (SSR) và tạo các trang web tĩnh. Next.js không thay thế React, mà chỉ mở rộng các khả năng của nó. Khi bạn sử dụng SSR, máy chủ có thể lấy 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 lập tức. 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.
Bên cạnh đó, SSR cũng có lợi 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. Để tìm hiểu hơn về cách Next.js chuyển đổi thành Zalo Mini App như thế nào thì cùng DigiBird khám phá ngay dưới đây nha.
2. Cách chuyển đổi từ dự án Next.js thành Zalo Mini App
Trước tiên, DigiBird xin lưu ý rằng:
| Khi bạn muốn chuyển web app hiện có bằng Next.js sang Zalo Mini App, bạn phải lưu ý rằng các tính năng Server-Side Rendering (SSR) hoặc Static Site Generation (SSG) sẽ không hoạt động được. |
2.1. Tổng quan
Bạn cần thực hiện 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
- Khởi tạo Zalo Mini App và liên kết với App ID của bạn.
- Thiết lập app-config.json
- Tách 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
Sau khi xuất Next.js thành static site, bạn sẽ nhận đượ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 trưng của Next.js.
Việc chuyển đổi Next.js sang Mini App gặp nhiều khó khăn. 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 cung cấp sẵn trong index.html mà Zalo Mini App tự sinh 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.
Bạn phải cài đặt basepath trong next.config.js trước khi build & export web app Next.js của bạn. Ví dụ:
Rồi sau đó chạy lệnh next build
2.3.Khởi tạo Zalo Mini App và liên kết với App ID của bạn.
Bước này rất đơn giản vì bạn chỉ cần dùng ZMP CLI và gõ vài lệnh là xong:
Sau đó bạn nhập Zalo Mini App ID của mình và đăng nhập bằng cách dùng ứng dụng Zalo quét QR là được.
2.4. Thiết lập app-config.json
Bước này ảnh hưởng nhiều nhất đến kết quả của việc chuyển đổi. Bạn phải chuyển các file CSS/JS được dùng trong index.html (output của Next.js khi xuất ra static sites) sang app-config.json (được dùng bởi index.html của Zalo Mini App khi chạy trên Zalo).
Bạn cũng có thể sử dụng command zmp sync-config để tự động map các resources từ index.html sang app-config.json. Ví dụ:
Ngoài các resource trên, Next.js còn gắn vào trang 1 thẻ script đặc biệt
| <script id=”__NEXT_DATA__” type=”application/json”> |
Bạn phải tạo 1 file .js riêng, đặt ở đầu listSyncJS và mục đích của script này là để chèn đoạn script trên vào trước các script khác của Next.js. Bởi vì app-config.json không hỗ trợ định dạng này.
| zmp sync-config sẽ tự động tạo file js này để có thể inject <script id=”__NEXT_DATA__”> và tạo root element <div id=”__next”> cho bạn. Nội dung file script nằm trong inline.js |
2.5. Tách hình ảnh và các resources nặng lên CDN
File app-config.json hợp lệ là yếu tố quan trọng của việc deploy. Nhưng bạn cần chú ý rằng Zalo Mini App chỉ cho phép app có dung lượng tối đa 10Mb, và mỗi file không quá 3Mb. Nếu web app của bạn có nhiều ảnh hay static resources nặng, bạn phải đưa chúng lên CDN.
Ngoài ra còn có nhiều cách khác như sử dụng component next/image và thiết lập custom loader.
2.6. Deploy và Publish
Đây chính là bước cuối cùng là đẩy app của bạn lên Zalo Mini App platform và gửi xét duyệt. Với ZMP CLI, việc này khá đơn giản:
Sau khi đảm bảo các chức năng của web app của bạn đã ổn định trên Mini App mới, bạn có thể gửi đi để được duyệt và phát hành cho người dùng. Bạn có thể xem demo kết quả của việc chuyển Next.js sang Zalo Mini App tại đây:
3. Kết luận
Trên đây là những bước hướng dẫn chuyển đổi Next.js thành Zalo Mini App. Qua đó, DigiBird mong muốn bạn hiểu hơn về quá trình chuyển đổi ứng dụng web có sẵn sang Zalo Mini App, cũng như đâu đó hiểu rõ hơn cách mà một Zalo Mini App hoạt động.
Và nếu bạn đang có những thắc mắc về Zalo Mini App hay là về các bước hướng dẫn trên. Hãy Liên hệ DigiBird để được tư vấn thêm và hỗ trợ trải nghiệm các phiên bản Demo Zalo Mini App đa ngành.
