title: Why is the typeof window check needed in Nextjs Image component
body: <p>So im making a placeholder image/svg to use <a href="https://nextjs.org/docs/api-reference/next/image#placeholder" rel="nofollow noreferrer">Nextjs image component</a> and i copied this <a href="https://github.com/vercel/next.js/blob/7439b976fc662d6818b7ac0dfcb006266b51d727/examples/image-component/pages/shimmer.js" rel="nofollow noreferrer">code</a> from their repo.
  Im not very experienced to backend development (mostly frontend) so i had to make research about buffer, streams, window.bto, etc.
  What i cannot fully understand is why is the <code>typeof window === &quot;undefined&quot;</code> is needed and the subsecuent lines of code. If I delete that, it works too.</p>
  <p>I can understand that's a borderline case, like a &quot;what if&quot;. But i can't wrap my head around why is needed. It's always going to be rendered to a browser. Why check if window is undefined?</p>
  <p>Thanks in advance and sorry for the bad english, it's not my main language.</p>
  <p><em>Nextjs Code</em></p>
  <pre><code>const shimmer = (w, h) =&gt; `
  &lt;svg width=&quot;${w}&quot; height=&quot;${h}&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;&gt;
    &lt;defs&gt;
      &lt;linearGradient id=&quot;g&quot;&gt;
        &lt;stop stop-color=&quot;#333&quot; offset=&quot;20%&quot; /&gt;
        &lt;stop stop-color=&quot;#222&quot; offset=&quot;50%&quot; /&gt;
        &lt;stop stop-color=&quot;#333&quot; offset=&quot;70%&quot; /&gt;
      &lt;/linearGradient&gt;
    &lt;/defs&gt;
    &lt;rect width=&quot;${w}&quot; height=&quot;${h}&quot; fill=&quot;#333&quot; /&gt;
    &lt;rect id=&quot;r&quot; width=&quot;${w}&quot; height=&quot;${h}&quot; fill=&quot;url(#g)&quot; /&gt;
    &lt;animate xlink:href=&quot;#r&quot; attributeName=&quot;x&quot; from=&quot;-${w}&quot; to=&quot;${w}&quot; dur=&quot;1s&quot; repeatCount=&quot;indefinite&quot;  /&gt;
  &lt;/svg&gt;`
  
  const toBase64 = (str) =&gt;
    typeof window === 'undefined'
      ? Buffer.from(str).toString('base64')
      : window.btoa(str)
  
  const Shimmer = () =&gt; (
    &lt;div&gt;
      &lt;ViewSource pathname=&quot;pages/shimmer.js&quot; /&gt;
      &lt;h1&gt;Image Component With Shimmer Data URL&lt;/h1&gt;
      &lt;Image
        alt=&quot;Mountains&quot;
        src=&quot;/mountains.jpg&quot;
        placeholder=&quot;blur&quot;
        blurDataURL={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
        width={700}
        height={475}
      /&gt;
    &lt;/div&gt;
  </code></pre>
  <p><em>My implementation on the component</em></p>
  <pre><code> &lt;Image
   src={props.src}
   layout={props.layout}
   width={props.width}
   height={props.height}
   placeholder=&quot;blur&quot;
   blurDataURL={`data:image/svg+xml;base64,${toBase64(shimmer(300, 300))}`}
   /&gt;
  </code></pre>