はじめに
本記事では、Typescriptを使用したNext.jsとTauriによるアプリケーション開発のチュートリアルを紹介します。このチュートリアルを通じて、デスクトップアプリケーションの作成に必要なスキルと知識を身につけることができます。
Typescriptでデスクトップアプリを作成する場合、Electronも候補になってきますが、Tauriのほうがメモリや容量がかなり抑えられるアプリが作成できます
Next.jsとTauriの基本
Next.jsはサーバーサイドレンダリングや静的サイト生成に優れたReactフレームワークです。一方、Tauriはウェブ技術を使って軽量なデスクトップアプリケーションを作成するためのフレームワークです。
Next.jsの詳細については公式ドキュメントを、Tauriについては公式ガイドを参照してください。
今回Next.jsについてはAPPRouterを利用します
Next.js13でのページとAPIのファイル名とディレクトリの命名[APP Router]
プロジェクトのセットアップ
まずはNext.jsプロジェクトを作成し、その後Tauriを統合します。
# Next.js+Tauriプロジェクトの作成（コマンド実行後にアプリ名やTypescriptを使用するかなどの選択ができます）
npx create-next-app@latest --use-npm
# プロジェクトディレクトリに移動
cd {作成したプロジェクト名}
# Next.jsで利用するライブラリのインストール
npm install --save-dev @tauri-apps/cli
# Tauriのセットアップ
npm run tauri init
package.jsonのscriptに下記部分にtauriコマンドが使用できるように追加します
"scripts": {
"tauri": "tauri"
},
設定を追加したらTauriアプリケーションをセットアップして、TauriアプリケーションとしてNext.jsを実行することができます
# Tauriのセットアップ
npm run tauri init
TauriとNext.jsの統合
Next.jsとTauriを統合することで、デスクトップアプリケーションの開発が可能になります。
tauri.config.jsonの下記部分を任意の値に変更します
逆ドメイン名の表記法によるアプリケーション識別子 (例：com.tauri.example)になっているためアプリで一意の文字列になります
{
"tauri": {
"bundle": {
"identifier": "任意の値に変更",
},
}
この設定により、TauriはNext.jsのビルドを行うことができ、デスクトップアプリケーションを作成することができます
アプリケーションの実行
設定が完了したら、アプリケーションを実行してみましょう。
// デベロッパーモードでアプリを起動
npx tauri dev
このコマンドを実行すると、開発サーバーが起動し、デスクトップアプリケーションが表示されます。
まとめ
このチュートリアルでは、Next.jsとTauriを使用してTypescriptでデスクトップアプリケーションを開発する方法を紹介しました。この組み合わせにより、ウェブ技術を駆使して効率的かつ効果的にデスクトップアプリケーションを開発できます。
最後に、Next.jsとTauriを使用することで、リッチなユーザーインターフェースと優れたパフォーマンスを兼ね備えたアプリケーションを開発することができます。RustとTypescriptの知識が必要にはなってきますが性能の面で素晴らしいアプリケーションが作成できるため、ぜひともTauriを使ってみてはいかがでしょうか
