嗨,我正在尝试在reactJS项目中使用react-rte.我有服务器端渲染,每次我想使用这个包我得到:
return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
^
ReferenceError: window is not defined
我想问题可能是同构工具,但我不知道如何将包导入到已经定义窗口的客户端.
是否可以使用Next js在某些页面上禁用ssr？例如，我有一个带有产品说明的页面，在该页面上我使用ssr进行SEO，但我也有一个页面，其中列出了可以过滤的项目或产品，对于该页面，我不想使用ssr，因为页面每次都会动态生成，如何在此页面上禁用ssr？
尽管我在应用程序的根目录下进行了初始化，但我多次收到以下警告（针对多个页面）。这让我想知道谷歌分析是否正常工作？
[react-ga] ReactGA.initialize must be called first or GoogleAnalytics should be loaded manually
我正在使用 ReactGA 来处理我的谷歌分析标签，但我无法让它工作。根据文档和其他一些在线问题，我需要做的就是将它插入到我的应用程序根目录中：
应用程序.js：
import ReactGA from 'react-ga';
ReactGA.initialize('G-xxxxxxxxxx');
const app = () => (
// Root level components here, like routing and navigation
)
我正在使用服务器端渲染，所以我在跟踪之前确保窗口对象存在。这一行放在我的每个页面上导入的末尾：
示例页面.js：
import ReactGA from 'react-ga';
if (typeof(window) !== 'undefined') {
ReactGA.pageview(window.location.pathname + window.location.search);
}
function page() {
return(<div className="page">Hello, World</div>)
}
export default page;
在这一点上，关于如何为 SSR 应用程序设置 Google Analytics 的信息并不多，所以我不完全确定我需要做什么才能使其工作。任何帮助表示赞赏！
javascript google-analytics reactjs server-side-rendering react-ga
我有 CRA 背景，正在努力学习 Next.js 版本 9.4.2
我的项目树看起来像这样：-
pages/
_app.tsx
index.tsx
components/
Navbar/
index.ts
Navbar.tsx
Navbar.scss
在我的里面Navbar.tsx我有一个声明import './Navbar.scss';
这给了我以下错误：-
./src/components/Navbar/Navbar.scss
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to src/pages/_app.tsx.
Read more: https://err.sh/next.js/css-global
Location: src/components/Navbar/Navbar.tsx
如前所述，如果我将语句import Navbar.scss移至pages/_app.tsx
我知道我可以切换到Navbar.module.scss，但我不想走模块化 scss 的路线，因为我希望我的 scss 变得复杂，我想坚持我编写 scss 的方式，而不是继续寻找解决方法以后可能出现的问题。我愿意在这里被说服，但我还没有找到很好的读物来选择它作为我的道路。
因此，从外观来看，我坚持将所有<component>.scss文件导入_app.tsx. 这将为我留下一长串<component>.scss导入列表_app.tsx，并且我还将留下许多<component>.scss可能有条件不渲染的组件文件。
我在这里有什么选择？
问候 Stack Overflow 社区！我使用以下 CSS 在我的 Next.js 项目中使用了一些自定义字体：
@font-face {
font-family: OpenSans;
font-display: swap;
src: url(./OpenSans-Regular.woff2) format('woff2');
}
问题是 Lighthouse 审计它告诉我预加载这些.woff2文件，但它们正在被 Next.js 散列。我不知道如何为字体添加link标签rel="preload"。
我在哪里可以告诉 Next.js 预加载这些字体？
谢谢！
我已经完成了 Next Js 应用程序的开发，到目前为止我已经使用vercel完成了自动部署
到目前为止一切都很好..但是我需要构建 Next Js 应用程序并与团队共享构建文件夹以在服务器中进行部署。
我遵循的命令，
npm run build &
npm run export
而上面的创建out目录..那么如何在我的本地机器上运行这个目录以检查构建文件夹是否按预期工作，然后再与团队共享？
out目录的文件夹结构：
-> out
-> _next
-> static
-> xxxxxxxxxxxxx (some random name)
-> static
-> home.png
-> location.png
所以任何人都可以帮助我如何运行这个生成的构建文件夹（out）来检查开发的 Next Js 应用程序在我的本地机器上是否正常工作，之后我可以与团队共享相同的构建文件夹？
具体来说，我想知道如何在本地构建下一个 js 应用程序，然后在本地测试构建的文件夹，该文件夹将运行该应用程序并可以与团队中的任何人共享工作构建。
在此处提出问题https://github.com/vercel/next.js/discussions/16439但这无论如何都无济于事..
我在服务器端渲染应用程序中集成了材质 UI，并遵循了此处给出的代码。Material UI css 已添加到服务器端本身的 html 中。
但是，在初始加载时，不会应用材质 ui 样式，这会导致它闪烁。
我尝试<cssbaseline>与下面的代码一起使用，但没有看到任何区别。
这是我的代码：server.js
import App from '../common/containers/App';
import { Provider } from 'react-redux';
import React from 'react';
import configureStore from '../common/store/configureStore';
import express from 'express';
import qs from 'qs';
import { renderToString } from 'react-dom/server';
import serialize from 'serialize-javascript';
import { StaticRouter, matchPath } from 'react-router-dom';
import {theme} from '../theme';
import { ServerStyleSheets, ThemeProvider } from '@material-ui/styles';
import routes from './routes'
import "../common/assets/SCSS/app.scss";
const assets = require(process.env.RAZZLE_ASSETS_MANIFEST); …在生产中，react_devtools_backend.js 无论如何都会加载，这会减慢我的网站在生产中的速度。如何禁用加载此反应开发工具？我正在使用react 16.8、reactSSR、webpack 4.29、apollo
我已经用过
new webpack.DefinePlugin({
'__REACT_DEVTOOLS_GLOBAL_HOOK__': '({ isDisabled: true })'
}),
和
if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === "object") {
for (let [key, value] of Object.entries(window.__REACT_DEVTOOLS_GLOBAL_HOOK__)) {
window.__REACT_DEVTOOLS_GLOBAL_HOOK__[key] = typeof value == "function" ? ()=>{} : null;
}
}
和
<script>
if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') {
__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function() {};
}
</script>
和这个
const disableReactDevTools = (): void => {
const noop = (): void => undefined;
const DEV_TOOLS = (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__;
if (typeof DEV_TOOLS === 'object') { …感觉这个问题已经被问了一百遍了。所以，这可能是一个很难回答的问题。我将为我的案例提供更多细节。也许会有帮助。
\n我正在使用 Next.js ^10.0.9 和next-seo ^4.22.0。我可以在 devtools 中看到元标记，但 FB 和 Twitter 以及许多其他元标记验证器无法获取它们。
\n从这里和其他地方的其他几个问题来看，似乎存在一些共识，只要它不在源代码中，即，如果我们“检查源代码”并且看不到它，那么它就不可用到刮刀。据我了解，这是因为这些机器人不运行渲染元标记所需的 JavaScript。
\n此页面源应该包含用于描述、标题、图像和其他一些内容的 opengraph 元标记，但它没有：
\n<!DOCTYPE html>\n<html lang="en">\n <head>\n <style data-next-hide-fouc="true">\n body{display:none}\n </style>\n <noscript data-next-hide-fouc="true">\n <style>\n body{display:block}\n </style>\n</noscript>\n\n<meta charSet="utf-8"/>\n<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width"/>\n<meta name="next-head-count" content="2"/>\n\n<noscript data-n-css=""></noscript>\n\n<link rel="preload" href="/_next/static/chunks/main.js?ts=1616232654196" as="script"/>\n<link rel="preload" href="/_next/static/chunks/webpack.js?ts=1616232654196" as="script"/>\n<link rel="preload" href="/_next/static/chunks/pages/_app.js?ts=1616232654196" as="script"/>\n<link rel="preload" href="/_next/static/chunks/pages/index.js?ts=1616232654196" as="script"/>\n\n<noscript id="__next_css__DO_NOT_USE__"></noscript>\n\n<style id="jss-server-side">html {\n box-sizing: border-box;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n*, *::before, *::after {\n box-sizing: inherit;\n}\nstrong, b {\n font-weight: 700;\n}\nbody {\n color: rgba(0, 0, 0, …我正在使用material-ui@v5，即。阿尔法分支。
目前，我有一个自定义Timeline组件可以执行以下操作：
const CustomTimeline = () => {
const mdDown = useMediaQuery(theme => theme.breakpoints.down("md"));
return (
<Timeline position={mdDown ? "right" : "alternate"}>
{/* some children */}
</Timeline>
);
};
它基本上按预期工作，但移动用户可能会遇到布局变化，因为它useMediaQuery是使用 JS 实现的并且仅在客户端。我想寻求与上述代码等效的 CSS 实现，以便与 SSR 一起使用。
我想到了以下几点：
const CustomTimeline = () => {
return (
<Fragment>
<Timeline sx={{ display: { xs: "block", md: "none" } }} position="right">
{/* some children */}
</Timeline>
<Timeline sx={{ display: { xs: "none", md: "block" } }} position="alternate">
{/* …javascript breakpoints reactjs material-ui server-side-rendering
reactjs ×10
next.js ×5
javascript ×4
material-ui ×2
webpack ×2
breakpoints ×1
deployment ×1
draftjs ×1
npm ×1
razzle ×1
react-ga ×1
sass ×1
seo ×1
ssr ×1