はじめに
近年、Electronに代わる軽量なデスクトップアプリ開発フレームワークとして注目を集めているのが「Tauri」です。
Web技術（HTML, CSS, JavaScript）を活用してネイティブアプリのようなUIを提供しつつ、バックエンドにはRustを採用することで極めて高速・省メモリなアプリが構築できます。
本記事では、TauriとNext.jsを組み合わせてデスクトップアプリを構築するシリーズの第一歩として、「環境構築」と「プロジェクトの初期化」について解説します。
なお、Todoアプリの全体像は下記カテゴリで管理しています
Tauriとは何か？
TauriはRustで構築されたセキュアかつ軽量なアプリフレームワークです。Electronよりもアプリサイズが小さく、起動速度も速いため、リソースを抑えたいデスクトップアプリに最適です。
公式の比較によれば、Tauriでビルドされた「Hello World」アプリはたった数MBで済みます。
また、Node.jsを使用せずともビルドできる構成も可能で、セキュリティやパフォーマンスに優れる点が開発者に支持されています。
今回の構成：Next.js × Tauri
TauriはVueやReactとも相性が良いですが、今回はSSRやファイルベースルーティングを活かせる「Next.js」と組み合わせて開発します。
なお、Next.jsについては公式ドキュメントで紹介されており、導入も簡単に行うことができます。
開発環境の準備
Tauriを動かすには以下の環境が必要です。
- Node.js (推奨: v18以上)
- Rust（stable版）
- Tauri CLI
- Vite + Next.js構成（Next.js公式ではVite非対応ですが、実験的構成を試す場合など）
以下の手順で開発環境を整えていきます。
Step1. Node.jsとRustのインストール
Node.jsは公式サイトからインストール可能です。
Rustの公式ドキュメントに沿ってインストールを行います
インストール後、rustのビルドツールcargoも一緒にインストールされます。
下記コマンドでバージョンが表示されればインストール完了です
cargo --version出力例：
cargo 1.87.0 (99624be96 2025-05-06)
Step2. Tauri CLIのインストール
npm install -g @tauri-apps/cliこれで、アプリケーションでtauriコマンドが実行できるようになります
プロジェクトの作成
Step3. Next.jsアプリの初期化
まずは、通常通りNext.jsアプリを作成します。
npx create-next-app tauri-todo-app出力例：
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes …
今回は、TypescriptとApp Routerを利用する予定なので、その設定はYesを選択しましょう
なお、Tauriの標準コマンド「npm create tauri-app@latest」で作成すると選べるフロントエンドにNext.jsがないため、Next.js→Tauriの順で作成します。
Step4. Tauriを導入
次に、Next.jsディレクトリ直下で以下を実行します。
cd tauri-todo-app
npx tauri init今回は、設定する項目は下記のようにして進めます.
✔ What is your app name? … TauriTodoApp
✔ What is your window title? … Todo App
...Step5. Next.jsプロジェクトにTauriの設定を行う
次に、package.jsonのscriptに「”tauri”: “tauri”」を追加します。
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint",
"tauri": "tauri"
},Step6. 動作確認
最後に、Webアプリをビルドしたあと、Tauriで起動します。
npm run tauri devこれで、Next.jsで構築したUIが下の画像のようにTauriによってネイティブアプリとして起動されます。
まとめ
ここでは、Tauriの概要から環境構築、Next.jsと組み合わせたプロジェクト初期化までを解説しました。
よって、軽量でセキュアなデスクトップアプリを作成するための準備として、Tauriは非常に有力な選択肢です。
また、フロントエンドに様々なフレームワークも使用できるため、学習コストも低いこともメリットです。
次回は、UI設計と基本的なTodo機能の構築に進みます。
なお、今後の記事では、状態管理など、より実用的な機能も扱っていく予定です。
【UI編】Tauri×Next.jsでTodoリスト画面を作ろう – Todoアプリを作る②
