我已经设定了一个目标，但是，我的问题是 服务器代码可以访问NextJs代码吗 我的意思是，NextJs是用webpack构建的，因此它被打包在自己的上下文中，所以如果我想在NextJs启动之前在服务器中初始化一些东西（比如数据库、日志系统等），然后从NextJs访问它。。。可能吗？除非服务器代码和NextJs代码在同一个捆绑包中，否则我看不出这是怎么回事，是吗 是的，我想有一些黑客可以使用，比如在运行时使用\uuuuu non\uwebpack\uu require\uuuu导入文件。。。但这看

我对Next.js有问题。当我尝试导入节点模块时， 模块使用窗口对象，Next.js抛出错误：窗口未定义 模块的导入方式如下所示： const MyComponent= dynamic( () => import('../components/hello3'), { ssr: false } ) <MyComponent/> import*作为“调查小部件”中的小部件； widgets.autocomplete（调查）； 我猜Next.js动态导入在我的情况下不起作用

我有一个next.js应用程序。 在init上，我需要调用一个操作来检索用户并将其设置为state。 这应该只发生一次，并且只在应用程序启动时发生（可能仅限于服务器端）。 在哪里进行此操作是正确的？ 内部app.js static async getInitialProps({ Component }) { . . if(!process.browser) { ... make your calls here let results = data } 将API调用的结果附加到…appP

我打算使用Airtable作为一个简单的数据库，将我制作的项目添加到我的投资组合网站中 我已经成功地获取并显示了项目，并将其发送到每个项目ID。但是，我仍然无法确定如何从该特定项目中获取其他数据并进行显示。静态地 从Airtable功能获取数据： export async function getProjectsData() { const res = await fetch( `https://api.airtable.com/v0/${BASE_KEY}/Projects?api

我已经部署了内置于Next.js的网站，显然，当你部署下一个js应用程序时，你可以找到我感觉不太好的所有静态文件和资源的目录 目录是这样生成的：mydomain.com/\u next/static在我的例子中https://www.ovanya.com/_next/static/ 这是目录： 下一个问题是： 为了防止显示目录列表页面，请添加一个索引文件，如index.html，它将在访问目录路径时显示该文件 但我真的不明白应该将index.html文件添加到哪个目录？那么我应该把index.

首先，在开发时间（纱线开发）上，没有路由问题。将应用程序部署（npm构建、导出和部署）到firebase后，重新加载页面或尝试直接打开页面，导致响应404未找到页面（尽管该页面已存在）。假设打开主页，然后使用next/link或next/router（router.push（'/page1'））访问其他页面，没有问题。比如, www.firebaseapp.web.app/ -> /page1 -> /page2 // rendering page www.firebaseapp.w

我想在下一个js中使用多个配置，使用： constwithimages=require（'next-images'）； constwithplugins=require（'next-compose-plugins'）； 常数{ 阶段\开发\服务器， 生产和建造阶段， }=require（'next/constants'） module.exports=withPlugins([ [withImages（），//第一个插件 （）=>（相位）=>{///秒 //在开发模式“next dev”或“n

我试图在Nextjs 10.1中使用情感11的CSS道具 根据文档，my.babelrc文件如下所示： { “预设”：[ [ “下一个/巴贝尔”， { “预设反应”：{ “运行时”：“自动”， “importSource”：“@emotion/react” } } ] ], “插件”：[“@emotion/babel plugin”] } my Nextjs页面： /**@jsx-jsx*/ 从'@emotion/react'导入{css，jsx} 导出默认函数testPage（）{ 常量颜色

由于我需要NextJS中的/about路由，我创建了以下文件夹结构： ... | pages/ | ├── about/ | ├── index.js | ├── AboutContent.jsx 其中，AboutContent.jsx只是一个组件，用于帮助index.js实现部分逻辑。问题在于AboutContent.jsx已经成为一条路线：/about/AboutContent。如何防止非index.js组件成为路由？将其移

我正在用Next.js静态站点生成创建我的博客 我将文章作为标记文件编写，标记组件通过getstaticpath返回标记文件列表来接收每个文件 我想用ImageMagick从markdown生成OGP图像 我可以用Next.js导出图像吗，比如getstaticpath？嗨，你可以添加一些代码吗？为什么加载URL并使用ImageMagick生成它迄今为止还没有奏效？我想只使用静态文件部署我的网站，因为它很容易部署和迁移到其他服务器。

当我在header.js或footer.js中使用fetch并将它们包含到我的layout.js中时，我得到的值是未定义的。同样的代码在单独的页面上运行良好，比如index或about static async getInitialProps(){ const response = fetch('http://localhost/coc/api/singletons/get/topbar/',{ headers: { 'Cockpit-Token': 'ae6d9be66

在getStaticProps中进行的API调用似乎会导致错误500 以下是我的组件代码： 从“React”导入React； 从“服务/API”导入API； 常量ArtistListPage=（道具）=>{ 返回( {props.artists.map（（artist）=>( {艺术家名字} ))} ); }; 导出异步函数getStaticProps（）{ //从文件系统、API、DB等获取外部数据。 const res=等待API.get（“/get_”）； const artists=wa

在我的next.js应用程序中，我使用了--experimental modules标志，因此我可以使用。can.mjs文件 "scripts": { "dev": "next dev --experimental-modules", "build": "next build --experimental-modules", "start": "next start

我正在尝试在nextjs应用程序之间使用模块联合（webpack 5）。 我从（两个nextjs应用程序）开始，一切都按预期进行。从我的观点来看，问题在于，只有当我在同一台主机上安装了两个应用程序时，这才有效。 上的相关网页包配置部分如下（在其他应用中相同） 。。。。 遥控器：{ next1:isServer ？路径解析( __dirname， “./next1/.next/server/static/runtime/remoteEntry.js” ) ：“next1”， }, ... 如果我

我正在尝试在我的SSR next.js应用程序上使用cypress和fixture编写一些测试，该应用程序使用Axios连接到restful API。但是我在使用cy.intercept（）拦截restful API时遇到了问题，因为cypress无法跟踪在SSR中发送的请求，而cy.intercept（）只对cypress可以跟踪的请求有效。有什么方法可以帮助我更改来自RESTfulAPI的响应吗？任何套餐也会有所帮助

不确定可能是什么问题。错误来自.next文件夹。即使是调试用的指针也会很好 您找到解决方案了吗？您找到解决方案了吗？

我在next.js应用程序中有以下页面：pages/products/[category].js。此页面有一个排序系统，可按价格、日期、标题等对产品进行排序。例如：http://localhost:3000/products/music?sortBy=price-asc 我有一个包含所有选项的选择，以及以下onChange： onChange={（e）=>{ 路由器推送({ 路径名：router.asPath，//获取当前路由（`products/music`） 查询：{sortBy:e.tar

我希望这个问题是清楚的，我现在有点心力交瘁了 我在生产中进行了一些Nginx重写，我需要在前端的nextjs应用程序中重现此功能 因此，我的重写规则如下所示 const rewrites = process.env.NODE_ENV === "development" ? [{ source: '/ovp/userdevices', destination: 'https://userdevices.backendservices.dk' },

无论是使用@harelpls/use pusher还是pusher js，问题都是一样的： Vercel上的服务器代码会触发带有消息的事件，前端客户端不会立即接收到该消息，相反，他们会在重新获得焦点时准确地接收到该消息，这对于实时应用程序来说是不可接受的，因为只有当页面焦点丢失并重新获得时，才会接收更新 如果出现推送器js，React组件包含以下代码： useEffect(() => { const pusher = new Pusher('the-app-id56567965

ctx.req未定义Next.js。此代码位于_document.js文件中 静态异步getInitialProps（ctx）{ const props=wait Document.getInitialProps（ctx）； const userData=wait getServerSideToken（ctx.req）； 返回{…userData，…props} } 我试图将ctx.req传递给getServerSideToken，但它显示了一个错误，指出ctx.req未定义您不应该在自定义\

假设我有一个页面，显示书中每一章的细节。用户可以从该页面导航到其他章节，因为屏幕侧边栏中有章节按钮，主要内容显示章节的详细信息 现在，用户将从书籍列表导航到该页面。在信息页面，没有那本书的章节信息 现在，如果URL是\bookSlug，那么页面将显示第一章的详细信息，即使URL中没有提到它，它也将获取章节列表，然后从该列表中获取第一章的详细信息。对于URL\bookSlug\firstchapterslaug，此行为保持不变 所以，在react router中，我经常这样做 <Route

目前我正在使用SSG，这是完美的。但我希望我的网站支持多语言。我尝试了next-18next，但它现在不支持SSG 我正在考虑使用本地子路径（例如domain.com和domain.com/es），但我无法想象如何生成一组新语言的静态html页面 有人知道吗

如果我正在构建一个包含大量页面的Next.js静态站点，例如100000页。我如何限制用于生成这些api的api调用的数量 例如，如果这些页面中的每一个都需要调用外部API来获取每个页面的唯一映像路径，那么如何避免调用外部API 我可以提前获取所有映像路径，但是如何跨getStaticProps的多个调用将这些路径存储在作用域中 我知道这可以在GetStaticPath中完成，但这似乎是一种反模式？恐怕没有内置的方法来实现这一点。您需要按照所述设置自己的缓存策略。

我正试图使用next.js中的next SEO来定制我网站的SEO 一切看起来都很好，除了在Facebook上共享链接时没有渲染图像 使用Facebook开发者调试器时，我收到以下错误消息： 推断属性 即使可以从其他标记推断出值，也应显式提供“og:image”属性 这是我的openGraph配置： title:“此处的站点标题”， description:`Site description here`， openGraph：{ 键入：“网站”， 区域设置：“fr_fr”， url:“此处的u

我用NextJS创建了一个网站，并将其部署在Vercel上 从url：如果我单击第一篇文章。页面加载没有任何问题。 但是，如果我直接用slug页面输入url：我会得到500个内部服务器错误 我的产品构建中没有这个错误 以下是我的slug页面代码： import ReactHtmlParser from 'react-html-parser'; import Layout from '../../components/Layout'; import { API_URL } from '../../

是否可以将.css文件作为next.js项目的一部分托管？我需要通过URL直接访问.css文件，例如https://website.com/style.css。我想我必须把它放在public文件夹中，然后访问它。如果是，怎么做？这是最好的方法吗？是的。您应该将文件放入公用文件夹以便访问。查看nextjs文档了解更多信息

我试过nextjs的例子，它对我没有用。在我的情况下，我有一个布局组件将发出API请求，例如，获取菜单数据。布局组件将具有子组件，该子组件也会发出API请求，因此我们永远无法预测子组件中会调用什么API。也就是说，我们无法将所有API请求收集到getInitialProps中

当我尝试在生产模式下打开我的连接或订阅页面时，我在控制台中遇到了这个错误，并且页面的url不是我在代码中设置的url。它在localhost中运行良好 framework.79fb030ec3df0dc442a2.js:1 TypeError: Cannot read property 'nom' of null at h (compte.js:1) at Gi (framework.79fb030ec3df0dc442a2.js:1) at ko (framework.79fb030ec3df

我们开发了一个Next.js应用程序。主页在初始加载之前需要几秒钟（7秒），然后请求任何其他工件。我们为身体调用菜单和无头api。该API前面是Cloudflare，是getServerSideProps的一部分。我们确实使用代理中间件来调用API 我们如何在SSR上识别长时间运行的线程？我们可以使用哪些性能优化技巧

我有个问题： 当我在文本字段中写入时，我想验证是否为唯一名称 我尝试了所有这些解决方案： 但是没有运气。。。我认为这是因为它们作为数组工作，所以我尝试： yup.addMethod(yup.array, 'unique', function(message, mapper = a => a) { return this.test('unique', message, function(list) { return list.length === new Set(l

我打算使用next/image来优化我网站上的图像。但是，在构建项目之后，我的所有图像都会获得一个样式属性，该属性似乎是重置样式。 我是React和Next.js的新手，我似乎找不到有同样问题的人 这是我的下一张/图片： <Image src="/images/KontacktPhoto.jpg" loading="lazy" id="w-node-c2896189-6d63-ce1c-bac3-f0aee0dcc9c2-e

我正在尝试创建一个SPA页面，在这里我只想刷新中心内容。使用nextjs可以实现这一点吗？我无法恢复标题和左菜单。对于一个企业应用程序来说，对于我们需要加载的每个页面进行渲染都非常昂贵 当我打开一个新页面时，是否可以在不重新加载（再次渲染）的情况下保留标题和菜单 我尝试过动态加载，但每次都会渲染

正在开发我的第一个下一个应用程序（和第一个react应用程序） 我正在努力理解getInitialProps。。。特别是当它被调用时，以及如果我只是刷新浏览器为什么它不会被调用 你可以浏览一些资源，比如youtube、官方文档。请考虑提供问题的研究链接来展示你的研究成果。

由于SEO原因，我正在从我的CreateReact应用程序（客户端渲染）迁移到下一个JS（服务器端渲染）。在使用React-Redux Firebase/Firestore之前，迁移一直进展顺利。这是我尝试加载的页面： Discover.js import React, { Component } from 'react' import { firestoreConnect, isEmpty } from 'react-redux-firebase'; import { compose } fr

我目前正在尝试找出并比较在next.js上构建和运行应用程序的两种方法的优缺点： 自定义服务器（我的项目中当前使用的方法） 无服务器（Next.Js团队强烈推荐的方法） 无服务器方法在Next.js文档中被描述为高度推荐的方法。他们还建议使用Vercel，它在next.js中内置了对无服务器方法的支持 我的应用程序正在使用azure云进行托管。我的应用程序是以自定义服务器方式构建和运行的。我还将使用CDN缓存页面。 是否有人有在azure infrastructure和CDN中使用以下工具实

我在pages/user/[id].jsx中有一个动态路由 my[id].jsx包含console.log（useRouter（）.query.id） 如果我转到url/user/5 当我检查控制台时，我得到了未定义的id，然后是正确的id（本例中为5）。这里发生了什么，有办法解决吗？您可以使用它 //示例用法 //文件/pages/user/[id].jsx 导出默认函数用户（{id}）{ 返回{id} } User.getInitialProps=（appContext）=>{ 返回{id:

我有一个NextJS应用程序，正在使用Storybook开发我的组件。 在浏览了所有的NextJS路由文档之后，我找不到从NextJS中路由到我的故事书的方法。仅访问/pages目录中的页面。 我希望在我的下一个应用程序Think all Environment中的/styleguide上提供我的故事书。 有人能帮忙吗

接下来，我在项目中创建了以下文件： /pages/user/[id].js 类Post扩展组件{ render（）{ 返回( ); } } 导出默认帖子； 但当我访问那个URL时，我会得到一个404 有什么问题吗？假设您正在访问（例如），http://localhost:3000/user/something（其中something是您的id），请尝试访问http://localhost:3000/user/something/（注意反斜杠）。这是下一个动态路由中的已知问题 （这还假设您的项目

我使用的是NextJs服务器，我需要有两个不同的公共资产文件夹。 已经在使用常规的/public文件夹为某些资产提供服务，但现在我需要在服务器上的其他位置添加第二个公用文件夹 我的代码 const express=require（'express'）； const next=需要（“next”）； const expressApp=express（）； const dev=process.env.NODE_env！='生产",； const app=next（{dev}）； const hand

我正在学习nextJS，并尝试将动态路由与综合路由结合使用。但是，我遇到了一个基本问题，我不确定如何在GetStaticPath中以数组的形式提供数据 这是我当前的代码： import Link from 'next/link' function test({ variable }) { return ( <> <div> <h1>{variable.var}</h1>

我已经将一个旧的html站点升级到下一个，我想将请求从旧页面重新路由到新页面。我发现在pages文件夹中创建一个名为myOldPage.html.tsx的文件可以捕获请求，我可以对其执行一些内部逻辑，但这是低效的，因为我有一堆html页面，每个页面有两种语言版本 对我来说，显而易见的解决方案是捕获.html页面的所有请求，然后执行一些内部逻辑来解析该请求，并在开关/案例块中将其重新路由到适当的新路由，但我不知道如何捕获这些请求。我的全部捕获路由（我执行所有正常路由）位于/pages/[…rout

我不知道如何制作next.jsImage组件。让我只设置图像的宽度，同时根据需要设置高度比例。我一直在翻文件，找不到方法。这没有道理为什么这么难 我了解Image组件的工作原理，我已经使用它一段时间了，现在可以相对轻松地使用layout=“fill”和objectFit=“cover”以及父相对div来调整大小 我试图显示的图像是从API检索的，所以我不知道它们的尺寸。我不想使用objectFit=“cover”，因为我不能对这些图像进行任何裁剪，因为它们是符合显示要求的徽标。我不想使用obje

使用chirp js sdk对于Next.js来说不是问题，但是由于我的应用程序需要在浏览器上接收chirp发送的数据，所以我不得不使用WebAssembly sdk。在何处以及如何实例化和使用chirpsdk 如前所述，我在设置它时没有遇到任何问题。 但是，onReceived，onReceived回调不会被调用 这是我在中使用的chirpsdk的页面片段 class AttendEvent extends Component { static async getInitialPro

使用内置api（/pages/api）的新选项，在客户端js上实现gzip的新的最佳实践方法是什么 我最近才开始把我的应用程序转换成NEXJS，所以我仍然在学习，但是我注意到在我的灯塔报告中，把NEXJS的所有东西都没有在生产中转换成任何东西。 < P>只是用一种非理想的方式来回答我自己的问题，在我的项目中把它作为一种创可贴方法来解决，就是在服务器上创建一个Server .js文件。根目录（自定义服务器方法）并粘贴此 process.env.NODE_ENV = "production"; co

这些天来，我的NextJS项目一直让我为Graph QL感到悲伤。我一直在尝试实现一个Apollo客户端解决方案，以将数据从远程GraphQL服务器检索到自定义组件中。但无论我尝试哪种解决方案，我总是以这个错误告终。以下是我当前的react apollo实现： // /lib/with-apollo-client.js import React from "react"; import Head from "next/head"; import { getDataFromTree } from

我正试图让下一个js使用transpiled样式的组件库正确加载。下面是一个简单的回购协议，用于重现问题： 所以发生的事情是，我有一个小应用程序来呈现组件，但它不会在SSR请求上显示样式，只有当客户端已经加载时 我正在尝试在文档中加载的所有情况： 但是它无法从组件捕获css。只有在SSR中构建的组件本身起作用，而不是我导入的组件 我如何调试它，并弄清楚CSS如何也可以附加到SSR请求上，而不仅仅是加载JS 在组件库中使用时，我能够获得一些工作，因为它输出一个CSS文件，我能够导入并添加到SSR渲

我以为我在正确的轨道上，但我得到了这个错误 Attempted import error: 'Navigation' is not exported from '../components/navigation'. 我的组件导航： const导航=（）=>( 家 关于 ); 导出默认导航； 我做错了什么？您可能正试图以这种方式导入： 从“../components/Navigation”导入{Navigation}； 虽然你应该这样做： 从“../components/Navigation

我刚刚安装了一个新的Next.js应用程序。它有以下页面： // /pages/articles/[slug].js import React from 'react' import { useRouter } from 'next/router' import ErrorPage from 'next/error' const Article = (props) => { const router = useRouter() if (router.isFallback) {

我有一个页面，在该页面内有动态导入： http://localhost:3000/rulesets/1 import dynamic from "next/dynamic"; const RegexInput = dynamic(import("./ExpressionEditor"), { ssr: false, }); export default RegexInput; RequireNumber参数方法： export function

即使在服务器关闭后，我也希望在单击指向另一页的链接时不显示布局。您可以在链接中设置prefetch=false？非常感谢。这样就可以防止预取。然而。如果它被缓存，症状仍然是一样的：如果我单击指向我过去访问过的页面的链接，即使服务器关闭，我也会被带到该页面并显示布局。您可以在链接中设置prefetch=false，非常感谢。这样就可以防止预取。然而。如果它被缓存，症状仍然是一样的：如果我点击一个指向我过去访问过的页面的链接，即使服务器关闭，我也会被带到该页面并显示布局。