[SOLVED] window is not defined - client sdk

import {
  Client,
  Account,
  Teams,
  Databases,
  Storage,
  Functions,
  Messaging,
  Locale,
  Avatars,
} from 'appwrite'

export const client = new Client()
  .setEndpoint(`${process.env.NEXT_PUBLIC_API_URL}/v1`)
  .setProject(`${process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID}`)

export const account: Account = new Account(client)
export const teams: Teams = new Teams(client)
export const databases: Databases = new Databases(client)
export const storage: Storage = new Storage(client)
export const functions: Functions = new Functions(client)
export const messaging: Messaging = new Messaging(client)
export const locale: Locale = new Locale(client)
export const avatars: Avatars = new Avatars(client)

export { ExecutionMethod, ID, Query } from 'appwrite'

'use client'
import { storage } from '@/app/appwrite-client'

export default function FetchGallery({ name, gallery }) {
  const getGalleryImageUrl = (galleryId: string) => {
    console.log(galleryId)
    if (!galleryId) return
    const imageId = storage.getFileView('655ca6663497d9472539', `${galleryId}`)
    return imageId.href
  }

  const url = getGalleryImageUrl(gallery?.galleryId)
  console.log(url)

  // The rest of the component remains unchanged with conditional rendering based on the data's availability.
  return (
    <img
      src={url}
      alt={name || 'Image'}
      className={`imgsinglegallery mx-auto h-[400px] w-auto max-w-full rounded-lg object-contain`}
    />
  )
}

//database.jsx

import { account, client, database, storage, teams, userId } from "@/utils/appwrite";
import { Query,ID } from "appwrite";
import { publish } from "./events";

export async function GetServerSpells(IncomingFilters) {
  const activeFilters = IncomingFilters || [];
  const queryOptions = [Query.limit(850)];
  if (activeFilters.length > 0) {
    //Include active filters in the query
    activeFilters.forEach((filter) => {
      switch (filter[0]) {
        case "SpellName":
          //console.log(`Database.jsx: Got: SpellName with filters ${filter[0]} | ${filter[1]}}`)
          queryOptions.push(Query.search(filter[0], `./${filter[1]}/`));
          break;
        case "Class":
          queryOptions.push(Query.search(filter[0], filter[1]));
          break;
        default:
          queryOptions.push(Query.equal(filter[0], filter[1]));
          break;
      }
    });
  }
  //console.log(`trying to find spells with filters: ${queryOptions}`);
  const x = await database.listDocuments(
    process.env.NEXT_PUBLIC_DATABASE_ID,
    process.env.NEXT_PUBLIC_COLLECTION_SPELL_ID,
    queryOptions
  );
  const list = await SortSpells(x["documents"]);
  //console.log(`Database.jsx: Found list: ${JSON.stringify(list)}`);
  return list;
}

//spelllist.jsx
"use client"
import { useState, useEffect } from "react";
import { GetServerSpells } from "@/utils/Database";


  const data = async () => {
    setSpellData(await GetServerSpells());
  };
  useEffect(() => {
    data();
  }, []);