Zenn
🦍

TauriとNext.jsでデスクトップアプリケーションを作成する手順

2024/10/25に公開
Next.js
Rust
Tauri
tech

はじめに

Webアプリケーションをデスクトップアプリケーションとして利用できるフレームワーク「Tauri」が注目されています。Tauriは、Electronのようなアプローチでありながら、軽量でセキュアなデスクトップアプリケーションを構築できる点が魅力です。本記事では、Next.jsとTauri 2.0を使用し、デスクトップアプリケーションを起動するまでの手順を解説します。

開発環境

本プロジェクトでは以下の開発環境を使用します。

  • Homebrew: パッケージ管理ツール
  • VSCode: コードエディタ
  • Mac mini (M2, 16GB RAM)

Rustのインストール

まず、Tauriの実行に必要なRustをHomebrewでインストールします。

brew install rust

次に、以下のコマンドでRustとCargoのバージョンを確認します。

rustc --version
# 出力: rustc 1.82.0

cargo --version
# 出力: cargo 1.82.0

Next.jsプロジェクトの作成

Next.jsプロジェクトを作成するには、JavaScript/TypeScriptのランタイムとビルドツールとして高速なBunを利用します。次のコマンドでNext.jsプロジェクトを作成します。

bunx create-next-app . --use-bun --ts

次に、以下のように設定を行います：

✔ Would you like to use ESLint? … No
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like your code inside a `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to use Turbopack for next dev? … Yes
✔ Would you like to customize the import alias (@/* by default)? … No

作成したプロジェクトのtsconfig.jsonファイルを編集し、Tauriの構成ファイルを除外するように設定します。

"exclude": ["node_modules", "src-tauri"]

また、next.config.tsに静的エクスポート設定を追加します。

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: "export",
};

export default nextConfig;

Tauriのインストールと設定

TauriのCLIをインストールし、アプリケーションに組み込むため、Bunのコマンドで以下を実行します。

bun add -D @tauri-apps/cli

次に、以下のコマンドでTauriの初期設定を行います。

bunx tauri init

設定プロンプトが表示されるので、以下のように設定します。

✔ What is your app name? · sample-app
✔ What should the window title be? · sample-app
✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? · ../out
✔ What is the url of your dev server? · http://localhost:3000
✔ What is your frontend dev command? · bun dev
✔ What is your frontend build command? · bun build

この設定により、src-tauriフォルダが生成され、Tauriに必要な設定ファイルがプロジェクト内に追加されます。

Rustファイルの設定

src/main.rsファイルには以下のコードを追加します。これはTauriアプリのエントリーポイントとなります。

#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

fn main() {
   tauri::Builder::default()
      .run(tauri::generate_context!())
      .expect("error while running tauri application");
}

開発サーバの起動

以下のコマンドで、開発サーバを起動し、Next.jsアプリケーションをデスクトップアプリケーションとして動作させることができます。

bunx tauri dev

これでNext.jsのWebアプリケーションを、Tauriを使用してデスクトップアプリケーションとして実行できます。

構築の詳細については、Tauri公式のNext.jsとのセットアップガイドも参考にしてください。

以上の手順で、Next.jsアプリケーションをTauriでデスクトップアプリケーション化できるようになりました。

Discussion