javascript进入应用后，每个react.js包和next.js都能正常工作？

【问题标题】：Every react.js package works normally with next.js after the javascript enters the application?javascript进入应用后，每个react.js包和next.js都能正常工作？
【发布时间】：2020-07-22 01:00:08
【问题描述】：

我不熟悉使用 Next.js 创建带有 react.js 的网站。我正在尝试将模块“react-insta-stories”（https://github.com/mohitk05/react-insta-stories）。只有他指责该文件没有定义。我知道你在这里也有类似的问题，但我想问你一些不同的、更笼统的问题……因为我想在这个项目中使用几个很棒的模块，而 next.js 似乎让它变得困难。有些模块只与“浏览器”对话。问题是......我可以在 javascript 实例化我的应用程序后使用 react.js 中的任何模块而 next.js 没有问题吗？有谁知道我如何将这个 react-insta-stories 放在我的项目中？因为我尝试了一些解决方案，但我认为它们超出了我的知识范围。

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

默认情况下next.js 执行服务器端渲染。获取需要文档或窗口工作的反应组件的快速而肮脏的方法是在下一步中将它们称为dynamic component。

如果您可以更好地允许您的组件在服务器端呈现，请在 useEffect 钩子或类似的钩子中运行此代码，因为这将被发送到浏览器运行。

例如

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}/>
  )
}

但这并不总是可行的，因为使用外部库您可能无法访问底层方法。回购中也有大量的examples。

【讨论】：