3 Solutions for ‘window is not defined’ Error in Next.js with Examples

While working on the Next Js project, you may have faced an issue saying ‘window is not defined’. Next js provides a powerful framework, that helps to create server-side rendered applications and that is by using Javascript.

But most of us face this ‘window’ or ‘document’ as an undefined issue because these are client-side available variables which are not available to be used on the client-facing end.

[lwptoc]

In this article, we will dive deep into the root cause of the ‘window is not defined’ or ‘window is undefined’ error, try to discuss use-cases when this issue appears, its course and of course various ways to resolve it.

The ‘window’ Object in JavaScript

In Javascript, a window is a global object which represents the browser’s window. The window object keeps the global objects related to functions and variables. For example when we declare a variable a, then we are able to access it using the window.a or by just using a :

let a = 10;
console.log(window.a); // Outputs: 10
console.log(a); // Outputs: 10

 

Why do we face the ‘window is not defined’ issue in Next.js

React-powered framework, Next JS supports the Server-Side rendering (SSR) of pages. In SSR, the Javascript code is executed on the server-side first and then sent to the client end.

The window object, which is a browser-specific global object, can’t be accessed on the server side. So when we try to give reference to the window object in our Next js app while server-side rendering, we face the ‘window is not defined’ error.

console.log(window.location.href); // Throws 'window is not defined' error in Next.js during SSR

 

When the ‘window is not defined’ Error is Encountered?

In this session, we will focus on various use cases, when developers may face the window not defined issue. We will discuss these scenarios with the help of sample code examples:

1. Using window in getServerSideProps Hook:

The getServerSideProps function in Next.js is used for server-side rendering which is executed on the server side and not the client side. So whenever we try to reference the window object inside getServerSideProps, we will face the window is not defined error.

export async function getServerSideProps(context) {
  console.log(window.location.href); // This will throw 'window is not defined' error
  return {
    props: {}, // will be passed to the page component as props
  };
}

 

2. Using window in a Next.js API Route:

Next js API routes help in building the APIs using the server-side code. If we try to use the window object in an API route for any reason, we will face the window undefined error.

// pages/api/hello.js
export default function handler(req, res) {
  console.log(window.location.href); // This will throw 'window is not defined' error
  res.status(200).json({ name: 'John Doe' });
}

 

Solutions for ‘window is not defined’ Error in Next.js

We have discussed in detail about what this issue and why we face it, now let’s discuss the following possible solutions in detail:

Sol. 1 – Using 'typeof' to Check the Existence of a ‘window’
Sol. 2 – Utilizing the useEffect React Hook
Sol. 3 – Dynamic Loading with SSR (Server-Side Rendering) Set to False

 

Sol. 1 – Using ‘typeof’ to Check the Existence of ‘window’

One of the quick-fix solutions is to use the typeof operator to check the availability of window. The typeofoperator returns a string to disclose the type of the unevaluated operand. Here is how we can use it:

// pages/index.js
export default function Home() {
  if (typeof window !== "undefined") {
    console.log(window.location.href);
  }
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
    </div>
  );
}

Above, we are checking the value returned by window using the typeof, if window exists it will return an “object” else it will be “undefined”.

 

Sol. 2 – Utilizing the useEffect React Hook

We can also use the useEffect hook which performs the side effects in a functional component. It is used to execute code after the first render and thereafter every update.

It runs on the client side where window object available to be accessed. Let’s have a look at how we can leverage useEffect to avoid the window undefined issue:

// pages/index.js
import React, { useEffect } from "react";

export default function Home() {
  useEffect(() => {
    console.log(window.location.href);
  }, []);
  
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
    </div>
  );
}

Sol. 3 – Dynamic Loading with SSR (Server-Side Rendering) Set to False

Next js also allows the dynamic import of modules, which are loaded at the runtime instead of module loading time. We can disable the server-side render for a specific module by setting the ssr options to false to do so. Let see how to do it:

// components/ShowWindowLocation.js
import React from "react";

export default function ShowWindowLocation() {
  console.log(window.location.href);
  return null;
}

// pages/index.js
import dynamic from "next/dynamic";
const ShowWindowLocation = dynamic(() => import("../components/ShowWindowLocation"), { ssr: false });

export default function Home() {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
      <ShowWindowLocation />
    </div>
  );
}

Above, we are dynamically importing the ShowWindowLocation component with ssr set to false. This means the ShowWindowLocation component will be loaded on the client side where the window object is available.

 

Conclusion

In this detailed guide, we discussed why we face window is not defined issue its possible reasons and three quick solutions with examples including:

1. Using typeof to check the existence of window
2. Utilizing the useEffect React hook
3. Dynamic loading with SSR (Server-Side Rendering) set to false

Hope this detailed guide will be helpful and you will be able to resolve the window is not defined issue in best possible way.