The “window is not defined” error is a common issue that developers encounter when working with Next.js. This error occurs because Next.js runs both on the server and the client, and the window object is only available in the client-side JavaScript environment. Understanding why this happens and how to resolve it is important for building robust applications. In this article, we’ll explore the root cause of the “window is not defined” error and discuss various methods to fix it in a Next.js application.

Why Does the “window is not defined” Error Occur?

In Next.js, components can be rendered on both the server side and the client side. The window object, which represents the browser’s window, is only available in the client-side environment (i.e., in the browser). When Next.js attempts to render a component on the server, any reference to the window object will cause an error because it does not exist in the server environment.

Common scenarios where you might encounter this error include:

• Accessing window or document objects directly in a component.
• Using libraries that depend on browser-specific APIs, like local storage or third-party scripts.

Steps to Setup Project

Step 1: Create a NextJs app using the given command in the terminal:

npx create-next-app@latest

Step 2: Add the given code in your projectStep 3: Write the given command to run the application:

cd my-next-js-app
npm run dev

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "eslint": "8.57.0",
    "eslint-config-next": "14.2.3",
    "next": "14.2.3",
    "react": "18.3.1",
    "react-dom": "18.3.1"
  }

Example: Implementation to show when the problem arises window is not defined in Nexjs Application

//app/MyComponent.js

"use client";

function MyComponent() {
    const height = window.innerHeight;

    return <div>My Component</div>;
}

export default MyComponent;

// app/pages.js

"use client"
import MyComponent from "./MyComponent";
export default function Home() {
    return (
        <main>
            <MyComponent />
        </main>
    )
}

Output

How To Fix The Error “window is not defined” in Next.Js

Method 1 : Use conditional checks

Wrap the code that accesses window in a conditional check to ensure it’s only executed in the client-side (browser) environment. This conditional ensures that window is only accessed when the code is running in a browser context. During server-side rendering, window is not available, so this check prevents the error from occurring.

Example: Implementation to fix the above error using conditional check method.

// app/page.js

"use client"
import MyComponent from "./MyComponent";
export default function Home() {
    return (
        <main>
            <MyComponent />
        </main>
    )
}

// app/MyComponent.js

"use client";

function MyComponent() {
    if (typeof window !== "undefined") {
        const height = window.innerHeight;
        console.log("Height: ", height);
    }
    return <div>Using Conditional Checks</div>;
}

export default MyComponent;

Output

How To Fix The Error “window is not defined” in Next.Js

Method 2 : Utilize dynamic imports

If you’re importing modules that reference window, use dynamic imports (import() syntax) instead of static imports (import statement) to delay importing until runtime, where window is defined. This approach is useful if you have components or modules that specifically need window and should only be loaded on the client side.

Example: Implementation to fix the above error Utilizing dynamic imports.

// app/page.js

import dynamic from 'next/dynamic';

const MyComponent = dynamic(() => import('./MyComponent'), {
    ssr: false // This ensures the component is not SSR'd
});

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

// MyComponent.js

"use client";

function MyComponent() {

    const height = window.innerHeight;
    console.log(height);

    return <div> Utilize dynamic imports</div>;
}

export default MyComponent;

Output:

How To Fix The Error “window is not defined” in Next.Js

Method 3 : Using useEffect Hooks

If you need to perform actions or initialize state that requires window, consider using useEffect in conjunction with useEffect’s dependency array to ensure certain operations only occur client-side:

Example: Implementation to fix the above error using useEffect Hooks.

// app/page.js

"use client"
import { useEffect } from 'react';

function MyComponent() {

    useEffect(() => {
        const height = window.innerHeight;
        console.log(height);
    }, []);


    return <div> Using useEffect Hooks</div>;
}

export default MyComponent;

// app/page.js

"use client"
import MyComponent from "./MyComponent";
export default function Home() {
    return (
        <main>
            <MyComponent />
        </main>
    )
}

Output

How To Fix The Error “window is not defined” in Next.Js

Conclusion

By using conditional checks, dynamic imports, and handling SSR-specific scenarios appropriately using useEffect, you can effectively mitigate and fix the “window is not defined” error in your Next.js applications. These strategies ensure that your code behaves correctly both during server-side rendering and client-side execution.