Next.js로 만든 웹 앱을 데스크톱 앱화

소개

공식적으로 예를 참고로, 이미 만든 웹 앱을 데스크톱 앱화해 보았습니다. 공식 튜토리얼에서 만든 것을 예로 써 가고 싶습니다.
우선 데스크탑 앱화하는 것 같은 느낌으로, 그대로 기능을 전부 사용할 수 있는 것은 아니고, 추가로 여러가지 구현이 필요하게 된다고 생각합니다만, 조금이라도 도움이 되면 기쁩니다.

참고 : with-electron-typescript

이번에는 아래 그림과 같이 src 디렉토리에 pages나 components 디렉토리가 들어 있는 구성으로 해 나가고 싶습니다.


작성한 리포지토리: htps : // 기주 b. 코 m / 노조 무츠 루타 / my b b g

소개

먼저 다음 명령으로 필요한 패키지를 설치합니다.

## npm
npm install electron-is-dev electron-next
npm install --save-dev electron electron-builder

## yarn 
yarn add electron-is-dev electron-next
yarn add -D electron electron-builder

Electron용 파일 작성

그런 다음 다음과 같이 electron-src에 세 개의 파일을 만듭니다.



electron-next 형 정의 파일 ↓

electron-src/electron-next.d.ts

declare module "electron-next" {
  interface Directories {
    production: string;
    development: string;
  }

  export default function (
    directories: Directories | string,
    port?: number
  ): Promise<void>;
}

window를 열고 닫을 때의 설정이나 처리↓

electron-src/index.ts

import { join } from "path";
import { format } from "url";
import { BrowserWindow, app, shell } from "electron";
import isDev from "electron-is-dev";
import prepareNext from "electron-next";

app.on("ready", async () => {
  await prepareNext(".");

  const mainWindow = new BrowserWindow({
    width: 1000,
    height: 800,
    webPreferences: {
      nodeIntegration: false,
      preload: join(__dirname, "preload.ts"),
    },
  });

  mainWindow.webContents.on("new-window", (event, url) => {
    event.preventDefault();
    shell.openExternal(url);
  });

  const url = isDev
    ? "http://localhost:8000/"
    : format({
        pathname: join(__dirname, "../out/index.html"),
        protocol: "file:",
        slashes: true,
      });

  mainWindow.loadURL(url);
});

app.on("window-all-closed", app.quit);

설정은 기호로↓

electron-src/tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "alwaysStrict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "lib": ["dom", "es2017"],
    "module": "commonjs",
    "moduleResolution": "node",
    "noEmit": false,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "esnext",
    "outDir": "../main"
  },
  "exclude": ["node_modules"],
  "include": ["**/*.ts", "**/*.tsx", "**/*.js"]
}

package.json에 추가

MyApp 부분은 앱 이름입니다.

그런 다음 package.json에 다음을 추가

package.json

{
  ...
  "productName": "MyApp"
  "main": "main/index.js",
  "scripts": {
   ...
    "dev-electron": "tsc -p electron-src && electron .",
    "dist": "next build && next export && tsc -p electron-src && electron-builder"
  },
  ...
}

일단 앱 아이콘은 이런 쓰기 방법으로 변경할 수 있습니다 ↓

package.json

{
  ...
  "build": {
    "mac": {
      "icon": "./public/icons/icon.icns",
      "target": [
        "dmg"
      ]
    },
    "win": {
      "icon": "./public/icons/icon.ico",
      "target": "msi"
    }
  }
}

.gitignore에 main과 dist를 추가합시다.

.gitignore

/main
/dist

만들기

마지막으로 다음 명령을 실행합니다. Windows 앱을 만들려면 뒤에 --win --x64를 붙입니다.

## npm
npm dist

## yarn
yarn dist

Finder 등에서 dmg 파일(windows는 폴더에서 exe 파일)을 열면 설치할 수 있습니다!


응용 프로그램에서 열면 이런 느낌이되었습니다!

마지막으로

여기까지 읽어 주셔서 감사합니다! 저 자신 Electron에 관한 지식이 아직 얕기 때문에 자세하게 설명할 수 없었던 부분이 많기 때문에 좀 더 학습을 진행해 나가고 싶습니다. 조금이라도 도움이 되면 기쁩니다!