title: Server Error ReferenceError: window is not defined in Next.js
body: <p>I'm trying to integrate <code>CleverTap</code> into my <code>Next.js</code> app. Followed the documentation <a href="https://developer.clevertap.com/docs/web-quickstart-guide" rel="nofollow noreferrer">Web SDK Quick Start Guide</a> but facing issue:</p>
  <blockquote>
  <p><strong>Server Error ReferenceError: window is not defined in Next.js</strong></p>
  </blockquote>
  <p><a href="https://i.stack.imgur.com/hGdnJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hGdnJ.png" alt="Please have a look" /></a></p>
  <hr />
  <p><code>_app.tsx</code></p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import type { AppProps } from &quot;next/app&quot;;
  import { appWithTranslation } from &quot;next-i18next&quot;;
  import { Hydrate, QueryClient, QueryClientProvider } from &quot;react-query&quot;;
  import { ReactQueryDevtools } from &quot;react-query/devtools&quot;;
  
  import nextI18NextConfig from &quot;../next-i18next.config.js&quot;;
  
  import &quot;tailwindcss/tailwind.css&quot;;
  import &quot;styles/globals.scss&quot;;
  import &quot;slick-carousel/slick/slick.css&quot;;
  import &quot;slick-carousel/slick/slick-theme.css&quot;;
  import { useRouter } from &quot;next/router&quot;;
  import SvgPageLoading from &quot;components/color-icons/PageLoading&quot;;
  // import { PageLoading } from &quot;components/color-icons/&quot;;
  
  import { DefaultSeo } from 'next-seo';
  import SEO from 'next-seo.config';
  import {cleverTap} from &quot;utils/cleverTapHelper&quot;;
  
  cleverTap.initialize('TEST-61c-a12');
  
  function MyApp({ Component, pageProps }: AppProps) {
    const [queryClient] = React.useState(
      () =&gt;
        new QueryClient({
          defaultOptions: {
            queries: {
              refetchOnWindowFocus: false,
              staleTime: Infinity,
            },
          },
        })
    );
    const router = useRouter();
    const [isAnimating, setIsAnimating] = useState(false);
    useEffect(() =&gt; {
      const handleStart = () =&gt; {
        setIsAnimating(true);
      };
      const handleStop = () =&gt; {
        setIsAnimating(false);
      };
  
      router.events.on(&quot;routeChangeStart&quot;, handleStart);
      router.events.on(&quot;routeChangeComplete&quot;, handleStop);
      router.events.on(&quot;routeChangeError&quot;, handleStop);
  
      return () =&gt; {
        router.events.off(&quot;routeChangeStart&quot;, handleStart);
        router.events.off(&quot;routeChangeComplete&quot;, handleStop);
        router.events.off(&quot;routeChangeError&quot;, handleStop);
      };
    }, [router]);
    return (
      &lt;QueryClientProvider client={queryClient}&gt;
        &lt;Hydrate state={pageProps.dehydratedState}&gt;
          &lt;DefaultSeo {...SEO} /&gt;
          &lt;Component {...pageProps} /&gt;
          {isAnimating &amp;&amp; (
            &lt;div className=&quot;fixed top-0 left-0 flex items-center justify-center w-screen h-screen overflow-visible bg-white bg-opacity-80 z-overlay top-z-index&quot;&gt;
              &lt;SvgPageLoading /&gt;
            &lt;/div&gt;
          )}
          &lt;ReactQueryDevtools initialIsOpen={false} /&gt;
        &lt;/Hydrate&gt;
      &lt;/QueryClientProvider&gt;
    );
  }
  
  export default appWithTranslation(MyApp, nextI18NextConfig);
  
  </code></pre>
  <p><code>cleverTapHelper.ts</code></p>
  <pre><code>export const cleverTap = {
      initialize: function (accountId) {
          console.log('I see initialize req')
          window.clevertap = {event: [], profile: [], account: [], onUserLogin: [], notifications: []};
          window.clevertap.account.push({'id': accountId});
          (function () {
              var wzrk = document.createElement('script');
              wzrk.type = 'text/javascript';
              wzrk.async = true;
              wzrk.src = ('https:' == document.location.protocol ? 'https://d2r1yp2w7bby2u.cloudfront.net' : 'http://static.clevertap.com') + '/js/a.js';
              var s = document.getElementsByTagName('script')[0];
              s.parentNode.insertBefore(wzrk, s);
          })();
      },
  
      event: function (name, payload = {}) {
          console.log('I see event req')
          if (payload) {
              window.clevertap.event.push(name, payload);
          } else {
              window.clevertap.event.push(name);
          }
  
      },
  
      profile: function (payload) {
          console.log('I see profile req')
          window.clevertap.profile.push(payload);
      },
  
      logout: function () {
          console.log('I see logout req')
          window.clevertap.logout();
      }
  };
  </code></pre>
  <p><code>cleverTap.d.ts</code></p>
  <pre><code>declare global {
      interface Window {
          clevertap: any;
      }
  }
  
  export {};
  </code></pre>
  <hr />
  <p><strong>Window</strong> object should not be <code>undefined</code> but getting undefined! What's going on?</p>