网站搜索

javascript - 将 NextJS、next-i18next、with-redux、with-redux-saga 连接起来:"错误:如果你在自定义的 _app.js 文件中有 getInitialProps 方法..."

我正在尝试将一个使用 'with-redux-saga' 和 'with-redux' 的正常运行的 NextJS/React 应用程序连接到 'next-i18next' (https://github.com/isaachinman/next-i18next) —— 但是当我的应用启动时,我收到以下错误:

错误:如果你在自定义的 _app.js 文件中有 getInitialProps 方法,你必须明确返回 pageProps。更多信息请参见:https://github.com/ze

阅读更多 →

javascript - 如何在 NextJS 中从 public 文件夹使用 fetch()?

我有以下使用场景。我有一个 web worker,在其中我需要获取位于 NextJS public 文件夹中的图像,以便将其转换为 blob。

目前执行 fetch('public/images/myImage.png'); 或 fetch('/images/myImage.png'); 会导致错误:

错误:TypeError:在 'WorkerGlobalScope' 上执行 'fetch' 失败:无法从 /images/ui/background_fire.jpg 解析 URL

所以我假设

阅读更多 →

javascript - 在 NextJS 中使用自定义文档时如何获取 URL 参数

我正在使用 NextJS 生成 SSR 页面,这些页面是特定语言的。我想设置 lang 属性来声明文本的语言。

到目前为止我有:

import Document, { Html, Head, Main, NextScript } from "next/document" import Router from "next/router" class MyDocument extends Document { render() { const { lanaguage } = Router.route

阅读更多 →

javascript - 如何为静态导出的 NextJS 应用设置 basePath

我需要将一个 React/NextJS 应用构建并部署到具有特定上下文的 Weblogic J2ee 服务器上。我有一些 React 经验,但这是我第一次使用 NextJS。

目前的构建/验证步骤是;

  • 创建一个原生的 NextJS 应用

  • 添加一个带有 module.export 的 next.config.js 来更改基础路径

    module.exports={ basePath: '/test' }

  • 执行 npm run dev

    阅读更多 →

javascript - 使用 VSCode 调试 Nextjs API 端点

目前,我必须手动查找要在 VSCode 的 /api 文件夹中设置断点的文件(API 端点)。

我有以下 launch.json:

{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "attach", "name": "Attach to appl

阅读更多 →

javascript - 在 NextJs 中嵌入 Calendly 脚本

我正在尝试在我的 Next.js 项目中嵌入 Calendly。

不过不确定该如何着手。理想情况下,我只是把它嵌入在单个页面上(而不是在 _app 或 _document 中)

到目前为止,我得到的是:

import Script from 'next/script'; import React from 'react'; const Page = () => { Calendly.initInlineWidget({ url: 'https://calendly.com/mycalendlyaccount/30min?month=2022-05' }

阅读更多 →

javascript - 当通过 Nextjs API 路由进行流式传输时,EventSource 会一次性获取所有块

问题

我正在尝试通过 EventSources 将数据流传输到我的 React 前端,这种方法某种程度上可以工作。问题是我一次性收到所有的数据块,而不是一次接一次地收到。这有点违背了该方法的初衷,因为它现在基本上相当于一个 GET 请求。

代码

我正在使用 Next.js API 路由,这是我在该路由上的代

阅读更多 →

javascript - 为什么一个空的、默认的 NextJS 应用程序的性能得分如此低?

我开始尝试我的第一个 Next.js 项目。

在通过 create-next-app 创建新项目后,我在网页应用 'Lighthouse' 中运行了性能标签(结果可以在下面的标签中查看)。性能报告的得分为 79,然而;所有其他测试都在 90 以上。

有人能向我解释为什么会有这些结果吗?

该项目是新创建的,完全为空,人们本以为性能报告会为这样的项目返回一个很高的分数,但并没有。如果您有任何见解可以帮助说明为什么性能测试会返回我上面解释的结果,将不胜感激。谢谢!

阅读更多 →

javascript - NextJS 动态 SSR:在移动设备上卡在加载中

问题:

Next JS 的动态导入在移动设备浏览器上一直处于加载状态(使用的浏览器:IOS 上的 Google Chrome 和 Safari)。而在桌面上的 Google Chrome 和 Mozilla 上可以完美运行。我也在使用默认配置的 next-PWA。这可能是由于 next-PWA 引起的吗?

代码片段:

import dynamic from "next/dynamic"; import { useMemo } from "react"; export default function Main() { const Component = useMemo( () => dynamic(() => import("@components/Component"), { loading: () => <p>The compon

阅读更多 →

javascript - NextJS React 应用的 styled component 渲染不正确:警告:Prop `className` 不匹配

在我的 NextJS 应用的 _app.tsx 中,我正在使用 import Router from 'next/router' 来为我的顶部菜单渲染不同的导航按钮样式。

当路径是/时,渲染是有效的,然而当我在/about时,渲染不起作用,并且我收到以下错误。即使布尔逻辑工作正常。

错误:

警告:属性 className 不匹配。服务器:"nav__NavActive-sc-6btkfp-2 gJVDzS nav__NavLink-sc-6btkfp-1 bvpMWI" 客户端:"nav__NavLink-sc-6btkfp-1 bvpMWI"

在下面的截图中,我目前位于 /about 路径,NavActive 样式应该应用到 about 链接上,但它没有。

阅读更多 →