Tauri v2 with Next.js v15
I was trying to use database SQLite in my Tauri app, I followed the official documentation and the database is working correctly. Like I can perform DB operations normally, but now I wanted to make a singleton instance for database. So I made a hook for database, but the problem is its not working as its supposed to, please have a look at my hook component.
I am running the project in Tauri environment
npm run tauri dev
The output of the console is:
Tauri detected: false
And:
window.__TAURI__
is undefined
import { useState, useEffect } from 'react';
import Database from '@tauri-apps/plugin-sql';
type DatabaseInstance = Awaited<ReturnType<typeof Database.load>>;
export const useDatabase = () => {
const [db, setDb] = useState<DatabaseInstance | null>(null);
useEffect(() => {
// Check here
console.log('Tauri detected:', !!window.__TAURI__);
console.log(window.__TAURI__);
if (typeof window !== 'undefined' && window.__TAURI__) {
Database.load('sqlite:test.db')
.then((database) => {
console.log('Database loaded successfully:', database);
setDb(database);
})
.catch((error) => {
console.error('Failed to load database:', error);
});
}
}, []);
return db;
};
Since __TAURI__
is inserted at runtime i had to make a type file for it.
import { Database } from '@tauri-apps/plugin-sql';
declare global {
interface Window {
__TAURI__: {
sql: {
load: (connectionString: string) => Promise<Database>;
};
};
}
}
package.json
"@tauri-apps/api": "^2.2.0",
"@tauri-apps/cli": "^2.2.7",
"@tauri-apps/plugin-sql": "^2.2.0",
"next": "15.1.6",
"react": "^19.0.0",
"react-color": "^2.19.3",
"react-dom": "^19.0.0"
The only thing that should be required for this is to enable build.withGlobalTauri
in v1 or app.withGlobalTauri
in v2 in tauri.conf.json
.