[Nextron] Electron + Next.js 사용해보기

 

Nextron 소개

Nextron은 Next.js와 Electron의 강력한 기능을 결합하여, 
개발자들이 멀티 플랫폼 데스크탑 애플리케이션을 보다 간단하고 효율적으로 만들 수 있도록 도와주는 패키지

 

Electron.js 장단점

• 플랫폼 독립성
• 사용의 용이성
• 데스크탑 API 접근성

• 앱 크기 : Electron은 Chromium을 함께 번들링하기 때문에, 생성되는 애플리케이션의 크기가 상당히 클 수 있다.
• 성능 : Electron 애플리케이션은 시스템 리소스를 많이 사용할 수 있으며, 특히 배터리 에너지와 시스템 RAM 소모가 큰 것으로 알려져 있다.
• Next.js 프로젝트를 일렉트론으로 패키징할 경우 경로 이슈가 생길 수 있다. (실제 진행해봤을 때 가장 큰 단점)

 

Next.js + Typescript + TailwindCSS 프로젝트 생성

실제 프로젝트에서 이 조합을 가장 많이 사용해서 위 옵션들로 프로젝트를 생성했다.

회사에서 처음 일렉트론으로 패키징을 하는 것을 알게되었고 총 두가지 프로젝트를 패키징하여 납품하였다.

허나.. 넥스트 프로젝트를 일렉트론으로 패키징하려니 경로 이슈가 정말 많이 생겼다.

 

아래 명령어로 하면 안됨 진짜 안됨 스타일도 안먹히고 내가 생성해야하는 파일이 너무 많음

npx create-nextron-app my-app --example basic-lang-typescript with-tailwindcss

 

 

⭐️ 꼭 꼭 꼭 아래 명령어로 앱을 생성해야한다.

이렇게 하니까 기본으로 타입스크립트가 내장되어있고 스타일도 적용됐다

아래 실행한 앱처럼 스타일이 적용되어있어야함!! 꼭!!

yarn create nextron-app my-app --example with-tailwindcss

 

 

넥스트 프로젝트를 일렉트론으로 패키징할땐 라우팅이 안됐는데 넥스트론으로 하니 된다.. 멋지다..

하지만 아직까지 API 경로 지원은 안되는 것 같다. 

 

 

 

파일 구조