DEV Community

Cassidy Williams for Netlify

Posted on • Originally published at netlify.com on

3 1

"Escaping" Next.js to access the browser

Welcome to 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
Enter fullscreen mode Exit fullscreen mode

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
  })
  ...
}
Enter fullscreen mode Exit fullscreen mode

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(<OtherThing/> ref.current);
  }, [])

  return <div ref={ref}/>
}
Enter fullscreen mode Exit fullscreen mode

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 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!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (1)

Collapse
 
okbrown profile image
Orlando Brown

A good use case for this is when your using 3rd party scripts. E.g. analytic scripts that require you to fire an action base on a specific event in your application. Tealium, Adobe etc.

Another one is if you are building multiple front ends that all are used within your Nextjs app or some other SSR where you will need an enclosure what contains your libs, assets etc. This can be placed on the window object where your other team/services/apps deployed in your enclosed app have access to things like React. Reducing the need for all your apps to be bundled with the same library.

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay