Tauri 2.0 & Next.js 14の環境を作成してみる
Electronの代替と期待されている「Tauri 2.0」の正式版がリリースされたということで、早速触れてみました。
TauriはRustで構築された、軽量、高速、安全なクロスプラットフォームのアプリを開発できるフレームワークとのことです。
Rustにも興味があったものの、なかなか触れる切っ掛けが無かったのでちょうど良い機会かなと。
一応自分もこれから触れていくところなので、まずは立ち上げの手順を残しておきます。
目標
- フロントとしてNext.jsを採用してみる
自分はWeb系でNext.jsをメインで利用しているので。 - Tailwind CSSを利用する
これもNext.js繋がりで、メインで利用しているので。
まずはTauriの開発環境を整える
公式ページに手順は記載されていますが、自分なりにまとめてみます。
GUIアプリの開発なので、今回はWindows環境を対象にしてみます。
メインの開発PCがWindowsではあるものの、最近はWSL、Docker、VMなどLinuxベースの環境での開発が多いので、純粋なWindows環境での開発は久しぶりです(笑)
Microsoft C++ Build Toolsのインストール
まずはWindows向けのデスクトップアプリのビルドに必要な「Microsoft C++ Build Tools」をインストールします。
Visual Studioのインストーラーを利用しますが、必要なモジュール(Desktop development with C++)のみ選択しインストールを行えばOKです。
下記Tauri公式の手順を参考にしてください。
Rustのインストール
下記Rust公式からインストーラーをダウンロードし、インストールを行います。
PowerShellを起動し、下記の通りrustcが利用できるようになっていればOKです。
> rustc --version
rustc 1.81.0 (eeb90cda1 2024-09-04)
コマンドが利用できない場合は、環境変数にC:\Users\xxxx\.cargo\binが登録されているかご確認ください。
Node.jsのインストール
Node.jsの公式
もしくはNVMを利用して
Node.jsのインストールを行ってください。
バージョンはLTS最新版のv20系を利用します。
npmの最新化と、自分はyarnを利用するのでcorepackを有効化しておきます。
> npm install -g npm@latest
> corepack enable
下記の通り、各種コマンドが利用できるようになっていればOK。
> node -v
v20.18.0
> npm -v
10.9.0
> yarn -v
1.22.19
これで環境準備は完了です。
Tauriのプロジェクト(アプリ雛形)を作成(初期化)
Tauriのプロジェクトを作成する為のコマンドが用意されているのでそれを利用します。
コマンドは色々と用意されていますが、今回はPowerShell用を利用してみます。
> irm https://create.tauri.app/ps | iex
info: downloading create-tauri-app
✔ Project name · tauri-app
✔ Identifier · dev.xxxx.tauri-app
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, bun)
✔ Choose your package manager · yarn
✔ Choose your UI template · React - (https://react.dev/)
✔ Choose your UI flavor · TypeScript
yarn、React、TypeScriptを利用する設定にしてみました。
yarn v4を利用するように設定
yarnはデフォルトだとv1系の利用になっているので、v4系を利用するように設定しておきます。
このあたりはお好みで。
> yarn set version stable
> yarn -v
4.5.0
ついでにyarnの実行ファイルをプロジェクトに含めてしまいます。（環境に依存しないように。
> yarn set version stable --yarn-path
さらに.yarnrc.ymlにnode-modulesを利用する設定を追加。
nodeLinker: node-modules
雛形プロジェクトをビルド＆実行してみる
ビルド＆実行してみます。
> yarn install
> yarn tauri dev
下記のように実行されれば成功です。
これで標準構成での起動確認までは完了です。
以降は、Next.jsの組み込みなどいろいろカスタムしていきます。
Next.jsを組み込んでみる
デフォルトではフロントモジュールとしてViteを利用する構成となっています。
これをNext.jsを利用する構成に変更してみます。
ちなみにNext.jsを選択したのは、単に現状で自分がメインで利用しているフレームワークというだけです(笑)
Vite向けのモジュールを削除
まずはデフォルトで組み込まれているVite向けのパッケージを削除します。
> yarn remove vite @vitejs/plugin-react
あとは下記ファイルを削除します。
- vite.config.ts
- src配下のファイル
→Next.js向けに再作成するので、一度src配下は削除してしまいます。
Next.jsの組み込み
公式の手順を参考にNext.jsを組み込んでみます。
Next.jsのパッケージを追加
> yarn add next@14 react@latest react-dom@latest
あと、開発用の一部足りないパッケージを追加しておきます。
> yarn add -D @types/node
最後に各種パッケージを最新化しておきます。
> yarn upgrade-interactive
Tauriの設定をNext.js用に修正
{
"build": {
"beforeDevCommand": "yarn dev",
"beforeBuildCommand": "yarn build",
"devUrl": "http://localhost:3000",
"frontendDist": "../out"
}
}
Next.jsの設定ファイルを作成
プロジェクト直下にnext.config.mjsを作成します。
const isProd = process.env.NODE_ENV === 'production';
const internalHost = process.env.TAURI_DEV_HOST || 'localhost';
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
images: {
unoptimized: true,
},
assetPrefix: isProd ? undefined : `http://${internalHost}:3000`,
};
export default nextConfig;
package.jsonのスクリプトをNext.js向けに修正
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"tauri": "tauri"
}
}
.gitignoreにNext.js向けの設定を追加
# next.js
/.next/
/out/
tsconfig.jsonをNext.js向けに修正
{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
サンプルページの作成
Next.jsの構成でサンプルページを作成しておきます。
Hello, Next.js!と表示するだけのシンプルなページです。
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="ja">
<body>{children}</body>
</html>
)
}
import { FC } from 'react'
const Top: FC = async () => {
return <h1>Hello, Next.js!</h1>
}
export default Top
Next.jsのビルド確認
設定を終えたら、まずはNext.jsとしてビルド(yarn build)できるか確認しておきます。
> yarn build
▲ Next.js 14.2.15
Creating an optimized production build ...
✓ Compiled successfully
✓ Linting and checking validity of types
✓ Collecting page data
✓ Generating static pages (4/4)
✓ Collecting build traces
✓ Finalizing page optimization
Route (app) Size First Load JS
┌ ○ / 142 B 87.2 kB
└ ○ /_not-found 873 B 87.9 kB
+ First Load JS shared by all 87.1 kB
├ chunks/117-9d7f1cd31c438fde.js 31.6 kB
├ chunks/fd9d1056-aa94ea5c2eabf904.js 53.6 kB
└ other shared chunks (total) 1.84 kB
○ (Static) prerendered as static content
こんな感じにビルドが成功し、outフォルダが作成されていればOKです。
Tauriでの起動確認(Next.js版)
Next.jsのビルド確認が出来たら、Tauriで起動してみます。
> yarn tauri dev
下記のように画面表示がされればOKです。
動的反映を確認しておきたいので、起動したままsrc/app/page.tsxをreturn <h1>Hello, Next.js! Updated!</h1>と書き換えてみます。
下記のように画面に反映されればOKです。
Tailwind CSSの組み込み
Next.jsと一緒にいつも利用しているTailwind CSSも組み込んでみます。
基本的にNext.js公式のTailwind CSS導入手順を参考にしています。
Tailwind CSSパッケージを追加
パッケージを追加し、初期化します。
> yarn add -D tailwindcss postcss autoprefixer
> npx tailwindcss init -p
Tailwind CSSの設定
設定を一部追加し、
/** @type {import('tailwindcss').Config} */
export default {
content: [
'./src/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {},
},
plugins: [],
}
globals.cssを作成、
@tailwind base;
@tailwind components;
@tailwind utilities;
作成したglobals.cssをimportします。
import './globals.css'
Tailwind CSSの確認
サンプルページのclassNameを指定し、反映されることを確認します。
const Top: FC = async () => {
return <h1 className='text-blue-500'>Hello, Next.js! Updated!</h1>
}
下記のように、指定した青文字(text-blue-500)に変更されれば成功です。
ESLint & Prettierの導入
最後にESLintとPrettierを導入しておきます。
（長くなってきたので、一旦このあたりで区切ろうかと思いますｗ
ESLint/Prettier関連パッケージの追加
> yarn add -D eslint@8 eslint-config-next eslint-config-prettier eslint-plugin-tailwindcss
> yarn add -D prettier prettier-plugin-organize-imports prettier-plugin-tailwindcss
ESLint/Prettierの設定
設定は参考までに。
{
"extends": [
"next/core-web-vitals",
"next/typescript",
"plugin:@typescript-eslint/recommended",
"plugin:tailwindcss/recommended",
"prettier"
],
"plugins": ["@typescript-eslint"],
"overrides": [
{
"files": ["*.ts", "*.tsx", "*.js"],
"parser": "@typescript-eslint/parser"
}
]
}
{
"trailingComma": "all",
"semi": false,
"singleQuote": true,
"jsxSingleQuote": true,
"printWidth": 120,
"plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"]
}
node_modules/
.next/
build/
dist/
out/
.yarn/
yarn.lock
Discussion
は誤解を招きかねない表現だと思います ( GUI 部分は Rust ではなく Web 技術で作るので 。。。)
「TauriはRustでマルチプラットフォームの軽量なアプリを作成できるフレームワークです」あたりでどうでしょう (？)
コメントありがとうございます。
分かりやすいよう、公式の記載内容に置き換えました。