ReferenceError: window is not defined in Next.js: Causes and How to Fix

Use Dynamic Imports

• To handle server-side rendering in Next.js where the traditional browser API is used, leverage dynamic imports. Dynamic imports help in loading a component or library only on the client side. Using next/dynamic, you can ensure that parts of your code only run in the browser environment.

 

• Here's an example of using Next.js dynamic imports:

import dynamic from 'next/dynamic';

const MyComponent = dynamic(() => import('../components/MyComponent'), { ssr: false });

export default function Home() {
  return <MyComponent />;
}

Check the Execution Environment

• Since `window` is only available in the browser, you can use conditional checks to execute specific code that relies on `window` or other browser-specific objects only in a client-side environment.

 

• Here's an example:

if (typeof window !== 'undefined') {
  // Client-side only code
  console.log('Client-side: ', window.location.href);
}

React useEffect Hook

• The useEffect Hook can be utilized to perform operations only once the component is mounted, ensuring that the code runs only on the client side. This is because useEffect is not executed during server-side rendering.

 

• Example usage:

import { useEffect } from 'react';

export default function Home() {
  useEffect(() => {
    console.log('Window location: ', window.location.href);
  }, []);
  
  return <div>Check the console!</div>;
}

Custom Hook for Client-Side Code

• Create a custom hook that executes a client-side operation, abstracting away repetitive checks and keeping code organized.

 

• Example of a custom hook:

import { useEffect, useState } from 'react';

function useClientOnly(callback) {
  useEffect(() => {
    if (typeof window !== 'undefined') {
      callback();
    }
  }, []);
}

export default function Home() {
  useClientOnly(() => {
    console.log('Window location: ', window.location.href);
  });

  return <div>Running Client-Side Code!</div>;
}

Wrapping Components with HOC

• Create a Higher-Order Component (HOC) to encapsulate client-specific logic and rendering, ensuring components are aware of their execution context.

 

• Example of wrapping a component with an HOC:

import { useEffect } from 'react';

function withClientCheck(WrappedComponent) {
  return (props) => {
    useEffect(() => {
      if (typeof window !== 'undefined') {
        console.log('Running in Browser Environment');
      }
    }, []);
    
    return <WrappedComponent {...props} />;
  };
}

export default withClientCheck(HomeComponent);