# Next.js window is not defined

> This error occurs because components are server-rendered by default. Learn how to resolve this issue in a few simple steps.

**URL:** https://sentry.io/answers/next-js-13-window-is-not-defined/

---

## The Problem

In Next.js version 13+, you may have encountered the following error when trying to use the browser API [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) object:

```
Unhandled Runtime Error
Error: window is not defined
```

This error occurs because components are server-rendered by default. Components are pre-rendered into HTML on the server before being sent to the client. The `window` object is not available on the server.

## The Solution

If you want to use browser APIs like `window`, use a [client component](https://nextjs.org/docs/app/getting-started/server-and-client-components). To make your component a client component add the React [`"use client"` directive](https://react.dev/reference/rsc/use-client) at the top of your component file, above your imports.

The client components will still be pre-rendered on the server and then hydrated on the client. To make sure that the code that uses the `window` object only runs on the client, use the `useEffect` hook, an event handler, lazy load the component, or do a check for the `window` object.

### Use `useEffect`

You can access the `window` object once the component is mounted inside a `useEffect` callback function:

```javascript
useEffect(() => {
	window.alert("window.alert from client component");
}, []);
```

### Use an Event Handler

You can also access the `window` object in event handlers because event handlers are added to the pre-rendered HTML on the client by React. This process is called hydration.

```html
<button onClick={() => window.alert("window.alert from client component")}>
  Click me
</button>
```

### Check If `window` is Defined

You can also check if the `window` object is defined:

```javascript
if (typeof window !== "undefined") {
  window.alert("window.alert from client component");
}
```

Be careful about using this method as it can cause [hydration errors](https://nextjs.org/docs/messages/react-hydration-error) if it causes a difference between the HTML that's pre-rendered on the server and the HTML that's first rendered on the client when the component is hydrated.

### Lazy Load Your Client Component and Disable SSR

If you want to access the `window` object at the top level of your component, you can [lazy load](https://nextjs.org/docs/pages/guides/lazy-loading) your client component and [disable pre-rendering on the server](https://nextjs.org/docs/app/guides/lazy-loading#skipping-ssr) to make sure that it's only rendered on the client. However, this may make the initial page load slower. This approach is useful when using client-only libraries or if you only need to load the client component after a certain user action.

---

*Source: [sentry.io/answers/next-js-13-window-is-not-defined/](https://sentry.io/answers/next-js-13-window-is-not-defined/)*