---
title: "How to “Escape” Next.js to Access the Browser"
description: "Sometimes you need what’s called an “escape hatch” to access certain browser properties and methods in a Next.js application. Here’s how to make one!"
source: "https://www.netlify.com/blog/2020/12/04/escaping-next.js-to-access-the-browser/"
last_updated: "2026-07-11T03:41:28.000Z"
---
Welcome to [Blogvent](https://www.netlify.com/blog/tags/blogvent/), day 4!
Often when you are trying to add event listeners or DOM variables outside of a Next.js application, you’ll get a particularly unhelpful error:
```
ReferenceError: window is not defined
```
To get around this, you can use the React hook, `useEffect`! There’s a couple options depending on what you need.
If you just need to access the window, you can use `useEffect` by itself, in something like this:
```
import { useEffect } from 'react'
function Page() { useEffect(() => { // use/set the window variable in here }) ...}
```
And if you need to get an object in the browser (a DOM node or something) outside of Next.js, and render something into it, you can combine `useEffect` with `useRef`!
```
import ReactDOM from 'react-dom';import { useRef, useEffect } from 'react'
function Page() { let ref = useRef()
useEffect(() => { ReactDOM.render( ref.current); }, [])
return }
```
## I can’t think of a use case for this!
That’s okay! It’s something that comes up for very specific cases of “escaping” Next.js (or even Gatsby or vanilla React projects), for example using event listeners, using external JavaScript libraries, or adding certain animations. If you’d like to see an example in a real codebase, [check out this part of the Activity Graph](https://github.com/netlify/explorers/blob/main/src/components/UserActivityGraph.js#L25-L34) in Jamstack Explorers.
Speaking of which, if you’d like to learn more about Next.js, check out the course (with more to come) on [Jamstack Explorers](https://www.youtube.com/watch?v=0qXjtznmhDI&list=PLzlG0L9jlhENGgDUr09a7JdRgSTybmE1P)!
### Share
- [X (fka Twitter)](https://twitter.com/intent/tweet?text=“Escaping” Next.js to access the browser&url=https://www.netlify.com/blog/2020/12/04/escaping-next.js-to-access-the-browser//)
- [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2020%2F12%2F04%2Fescaping-next.js-to-access-the-browser%2F%2F)
- [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2020/12/04/escaping-next.js-to-access-the-browser//)
- [Bluesky](https://bsky.app/intent/compose?text=“Escaping” Next.js to access the browser+https://www.netlify.com/blog/2020/12/04/escaping-next.js-to-access-the-browser//)
* * *
### Tags
- [Next.js](/blog/tags/next.js/)
- [blogvent](/blog/tags/blogvent/)
## Keep reading
Guides & Tutorials December 2, 2020
[
### Next.js: Should I use SSR or SSG?
](/blog/2020/12/02/next.js-should-i-use-ssr-or-ssg/)
- 
Cassidy Williams
Guides & Tutorials May 15, 2026
[
### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend)
](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend)
- 
Nahrin Jalal
## Recent posts
News & Announcements June 25, 2026
[
### Netlify Functions, designed for Agent Experience
](/blog/netlify-functions-designed-for-agent-experience)
- 
Eduardo Bouças
News & Announcements June 24, 2026
[
### How we measure Netlify’s Agent Experience
](/blog/how-we-measure-netlify-agent-experience)
- 
Sean Roberts
Guides & Tutorials May 15, 2026
[
### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend)
](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend)
- 
Nahrin Jalal
### How do the best dev and marketing teams work together?
[Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)