Sling Academy
Home/Next.js/Solving the ‘Window is Not Defined’ Error in Next.js

Solving the ‘Window is Not Defined’ Error in Next.js

Last updated: January 10, 2023

This article shows you a few solutions to fix the window is not defined error in Next.js.

Understanding The Problem

When working with Next.js, you are likely to run into the window is not defined error at least one time in your career. The error occurs when you attempt to access the window object on the server side while the window object is only available in the browser environment. This error can also happen when you use a functionality or component (that needs the window object) provided by a third-party library.

The code below is an illustration of causing the error:

// pages/index.js
export default function Home() {
  console.log(window.innerWidth);
  console.log(window.innerHeight);

  return (
    <div style={{ padding: 30 }}>
      <h1>Sling Academy</h1>
    </div>
  );
}

Screenshot:

Solutions

Checking the existence of the window object

To avoid the window is not defined error, you should always remember to check for the existence of the window object before using it. This will ensure that your app will not crash if it is running in a non-browser environment:

// pages/index.js
export default function Home() {
  if (typeof window !== 'undefined') {
    console.log(window.innerWidth);
    console.log(window.innerHeight);
  }

  return (
    <div style={{ padding: 30 }}>
      <h1>Sling Academy</h1>
    </div>
  );
}

Using the useEffect hook

The useEffect hook will always run in the browser, so you can use this to ensure that your code is only executed on the client, like this:

// pages/index.js
import { useEffect } from 'react';
export default function Home() {
  useEffect(() => {
    console.log(window.innerWidth);
    console.log(window.innerHeight);
  }, []);

  return (
    <div style={{ padding: 30 }}>
      <h1>Sling Academy</h1>
    </div>
  );
}

Cheer!

Next Article: Next.js Issue: useEffect Hook Running Twice in Client

Series: Common Errors in Next.js

Next.js

Related Articles

You May Also Like

  • Solving Next.js Image Component Error with CSS Classes
  • How to Use MUI (Material UI) in Next.js 14
  • Fixing Data Update Issues in Next.js Production
  • Fixing Next.js Undefined ENV Variables in Production Build
  • Solving Next.js SyntaxError: Unexpected token ‘export’
  • Next.js Error: Found Page Without a React Component as Default Export – How to Fix
  • Fixing Next.js Error: Blank Page on Production Build
  • Fixing Next.js Error when Importing SVGs: A Step-by-Step Guide
  • Next.js Issue: useEffect Hook Running Twice in Client
  • Fixing ‘self’ is not defined error in Next.js when importing client-side libraries
  • How to Dockerize a Next.js App for Production
  • How to set up Next.js with Docker Composer and Nginx
  • Solving Next.js CORS Issues: A Comprehensive Guide
  • Fixing Next.js Hydration Mismatch Error in Simple Ways
  • Next.js Error: Cannot use import statement outside a module
  • Next.js: How to Access Files in the Public Folder
  • Fixing Next.js Import CSS Error: A Simple Guide
  • Fixing LocalStorage Not Defined Error in Next.js
  • Fixing Next.js Error: No HTTP Methods Exported