window.__TAURI__ is not available

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.