【2023年最新版】Electron + Next.js + TypeScript + tailwindCSS でMac/Windows用アプリを作成する【React】

React

【2022年最新版】Electron + Next.js + TypeScript でMac/Windows用アプリを作成する【React】

2022年01月23日19:272023年04月12日10:32

この記事は約5分で読めます。

この記事の最終更新日: 2023年4月12日

【2022年最新版】Electron + Next.js + TypeScript でMac/Windows用アプリを作成する【React】

テキストエディタを準備
Node.js(&npm)をインストール
Electronプロジェクトを作成
1. アイコンを設定する
tailwindsCSSを使えるようにする
表示幅を変更
アプリの画面を編集

テキストエディタを準備

テキストエディタはVSCodeか、webstromがおすすめ。

Node.js(&npm)をインストール

nodeをまだ入れていない人はこちらからダウンロード

https://nodejs.org/ja/

Electronプロジェクトを作成

sampleというプロジェクトで作成する場合

# npm
$ npx create-next-app --example with-electron-typescript sample
$ cd sample
$ npm run build
$ npm run start

# yarn
$ yarn create next-app --example with-electron-typescript sample
$ cd sample
$ yarn build
$ yarn start

package.jsonにnameとversionを追記 productNameを変更

"name": "sample",
"version": "1.0.0",
"private": true,
"main": "main/index.js",
"productName": "sample",
"scripts": {
  "clean": "rimraf dist main renderer/out renderer/.next",
  "dev": "npm run build-electron && electron .",
  "build-renderer": "next build renderer && next export renderer",
  "build-electron": "tsc -p electron-src",
  "build": "npm run build-renderer && npm run build-electron",
...

アイコンを設定する

プロジェクト直下に「build」ディレクトリを追加し、画像を入れる。

その後package.jsonに追記する

"build": {
  "asar": true,
  "files": [
    "main",
    "renderer/out"
  ],
  "mac": {
    "target": "dmg",
    "icon": "build/icon.png"
  },
  "win": {
    "target": "nsis",
    "icon": "build/icon.png"
  }

tailwindsCSSを使えるようにする

$ npm install tailwindcss@latest postcss@latest autoprefixer@latest
$ npx tailwindcss init -p

renderer/pagesに「_app.js」を作成

// _app.js

import "tailwindcss/tailwind.css";

function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />;
}

export default MyApp;

先ほど生成された、renderer直下のtailwind.config.jsを編集。

module.exports = {
  content: ["./renderer/pages/**/*.{js,ts,jsx,tsx}",
    "./renderer/components/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

コマンド備忘録

$npm run clean //クリーンにする
$npm run build
$npm run dist //dmgファイル生成

$npm run dev //実行しながらコード編集できるモード

表示幅を変更

electron-srcの「index.ts」から縦と横の比率を変更可能。

// Native
import { join } from 'path'
import { format } from 'url'

// Packages
import { BrowserWindow, app, ipcMain, IpcMainEvent } from 'electron'
import isDev from 'electron-is-dev'
import prepareNext from 'electron-next'

// Prepare the renderer once the app is ready
app.on('ready', async () => {
  await prepareNext('./renderer')

  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: false,
      preload: join(__dirname, 'preload.js'),
    },
  })