CODEWITHSUNDEEP
reactjsnext.js
nastari
nastari

Reputation: 51

Every react.js package works normally with next.js after the javascript enters the application?

I'm new to using Next.js to create websites with react.js. I am trying to put the module "react-insta-stories" (https://github.com/mohitk05/react-insta-stories). Only he accuses that the document is not defined. I know you've had similar questions here, but I wanted to ask you something different, more general ... Because there are several awesome modules that I wanted to use in this project and the next.js seems to make it difficult. Some modules just that only speak with the "browser" . The question is ... can I use any module even from react.js after javascript instantiates my application with no problems with next.js? And does anyone know how I could put this react-insta-stories in my project? Because I tried some solutions, but I think they are beyond my knowledge.

Upvotes: 0

Views: 1433

Answers (1)

Robert Koch
Robert Koch

Reputation: 11

By default next.js performs server side rendering. The quick and dirty way of getting react components that require the document or window to work is to call them as a dynamic component in next.

If you can a better way that allows for server side rendering of your component is to run this code in a useEffect hook or similar, as this will be sent to the browser to run.

For example

import React, { useEffect, useRef } from 'react'

function ComponentWithEffect(): JSX.Element {
   const divRef = useRef<HTMLDivElement>(null)

   useEffect(() => {
       divRef.current?.width = window.width
       divRef.current?.height = window.height
   }, [])

   return(
    <div ref={divRef}/>
  )
}

But this is not always possible, because with external libraries you might not have access to the underlying methods. There are heaps of examples in the repo as well.

Upvotes: 1

Related Questions