Nextron: Framework Desktop Next.js Và Electron

Nextron Là Gì?

Nextron là một framework mã nguồn mở, được duy trì tại saltyshiomix/nextron, dựng khung một ứng dụng Electron quanh một renderer Next.js để phần giao diện chạy bằng mã web thông thường. Một dự án được chia thành thư mục cho tiến trình chính và thư mục renderer, nơi Next.js build thành static export trước khi Electron nạp nó, còn electron-builder xử lý bước đóng gói cho macOS, Windows, và Linux.

Tính Năng Và Tích Hợp Chính

• ✓Bảng tương thích phiên bản Next.js với Nextron ngay trong README: Next.js v16.x đi cùng Nextron v10.x, v14.x-v16.x đi cùng v9.x, v12.x-v13.x đi cùng v8.x, cho tới v6.x đi cùng Nextron v1.x.
• ✓Hỗ trợ ESM thêm từ bản v10: đặt trường type trong package.json thành module, chuyển next.config.js sang export default, và thay __dirname bằng import.meta.dirname trong toàn bộ mã nguồn.
• ✓Dựng khung dự án qua create-nextron-app, với các mẫu ví dụ gồm with-tailwindcss, with-material-ui, with-chakra-ui, with-ant-design, with-emotion, và with-next-i18next.
• ✓Tuỳ chỉnh cấu hình webpack cho tiến trình chính qua nextron.config.ts, gồm cả việc ghi đè mainSrcDir và rendererSrcDir.
• ✓Các cờ CLI cho chế độ phát triển: --renderer-port để đổi cổng dev server của Next.js (mặc định 8888), --run-only để tắt hot reload của tiến trình chính, --startup-delay để chờ renderer sẵn sàng, và --electron-options để truyền thẳng các cờ của Electron như --no-sandbox.
• ✓Các cờ build theo từng nền tảng để đóng gói: --mac, --mac --universal, --linux, --win --ia32, --win --x64, cùng --no-pack để bỏ qua bước đóng gói của electron-builder.
• ✓Cấu hình Babel riêng cho tiến trình chính qua file .babelrc với preset nextron/babel.

Bắt Đầu Với Nextron

Không có bước cài đặt riêng. create-nextron-app dựng toàn bộ dự án chỉ bằng một lệnh: `npx create-nextron-app my-app --example with-tailwindcss`, hoặc tương đương với yarn/pnpm (`yarn create nextron-app my-app --example with-tailwindcss`, `pnpm dlx create-nextron-app my-app --example with-tailwindcss`). Đổi giá trị --example sang bất kỳ mẫu có sẵn nào, kể cả basic-lang-javascript, basic-lang-typescript, và with-chakra-ui. README không nêu phiên bản Node.js tối thiểu, nên bạn cần tự kiểm tra điều đó theo phiên bản Next.js mà mình đang dùng.

Build Chế Độ Phát Triển Và Production

Chế độ phát triển chỉ cần một script: đặt mục dev trong package.json thành `nextron`, rồi `npm run dev` sẽ mở cửa sổ Electron với dev server của Next.js đã được nối sẵn để hot reload. Production hoạt động tương tự - đặt mục build thành `nextron build`, và `npm run build` xuất các bản đóng gói vào thư mục dist. Bên dưới, file next.config.ts của Nextron buộc `output: 'export'` vì Electron cần file tĩnh, đổi distDir thành ../app khi ở production, bật trailingSlash để home.tsx thành home/index.html, và tắt tối ưu hoá ảnh của Next vì nó không hoạt động với static export. Build theo từng nền tảng dùng các cờ: `nextron build --mac`, `--mac --universal`, `--linux`, `--win --ia32`, `--win --x64`, và bản macOS phải được build trên chính máy macOS. Việc đóng gói do electron-builder.yml đảm nhiệm, nơi khai báo appId, productName, thư mục output, và những file nào được đóng gói; trỏ tới file cấu hình khác bằng --config, hoặc bỏ qua đóng gói hoàn toàn bằng --no-pack.

Ví Dụ Ứng Dụng Nextron

• •Dựng một ứng dụng desktop dùng Tailwind từ mẫu with-tailwindcss thay vì tự nối Tailwind vào Electron bằng tay.
• •Ra mắt một ứng dụng mở từ một custom URL protocol, dùng mẫu basic-launch-app-from-url - README ghi rõ mẫu này chỉ hoạt động ở bản build production.
• •Bắt đầu một ứng dụng desktop cần lưu dữ liệu cục bộ, dùng basic-store-data làm nền thay vì tự xây cơ chế lưu trữ từ số không.
• •Gắn thẳng Ant Design, Chakra UI, Material UI, hay Emotion từ đúng thư mục mẫu tương ứng thay vì tự cấu hình từng bộ UI kit.
• •Đa ngôn ngữ hoá giao diện ứng dụng desktop bằng mẫu with-next-i18next khi sản phẩm cần hơn một ngôn ngữ.

Lựa Chọn Thay Thế Cho Phát Triển Desktop

Câu Hỏi Thường Gặp

Vấn đề Nextron giải quyết

Gắn một framework frontend hiện đại vào Electron thường có nghĩa là viết một entry point cho tiến trình chính riêng, tự cấu hình một bundler cho nó, và tìm cách nạp output của dev server vào một BrowserWindow khác với bản build tĩnh cho production. Next.js còn thêm một điểm khó riêng: renderer phải chạy dưới dạng static export, tắt tối ưu hoá ảnh và server rendering, trước khi Electron nạp được. README của Nextron đóng khung lý do tồn tại của dự án quanh chi phí thiết lập đó, mô tả mục tiêu là cho nhà phát triển một cách xây ứng dụng desktop chỉ bằng kỹ năng web thông thường, giữ mọi thứ dễ dùng, và cởi mở với người đóng góp bên ngoài, rồi gói toàn bộ phần nối Next.js với Electron vào một CLI và các dự án mẫu thay vì phải tích hợp lại từ đầu mỗi lần.

Ai nên dùng — và ai nên bỏ qua

Hãy thử Nextron nếu đội của bạn đã xây dựng bằng Next.js và React và muốn có bản desktop mà không cần thêm một framework frontend thứ hai hay tự viết boilerplate cho tiến trình chính của Electron. Bỏ qua nếu bạn cần dung lượng cài đặt nhỏ hơn những gì Electron tạo ra - Nextron không thay đổi runtime của Electron - hoặc nếu ứng dụng của bạn cần server-side rendering và API route lúc chạy, vì yêu cầu static export loại bỏ khả năng đó.

Repo liên quan